How do I install the Shadcn skill?

Run npx skillmds@latest add markhamsquareventures/shadcn in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Shadcn skill do?

How to work effectively with shadcn/ui components, always use when adding UI components It is listed under Coding & Dev Tools on SkillMD.

Is Shadcn safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Shadcn?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Shadcn free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Shadcn?

markhamsquareventures (@markhamsquareventures) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Shadcn by markhamsquareventures — Agent Skill

Name: Shadcn
Author: markhamsquareventures

File contents

shadcn/ui

Instructions

This project uses shadcn/ui with the New York style variant. Components are built on Radix UI primitives with Tailwind CSS styling.

Configuration

Style: new-york
Base color: neutral
Icons: lucide-react
Components location: resources/js/components/ui/
Utils location: resources/js/lib/utils.ts

Adding New Components

Use the shadcn CLI to add components:

npx shadcn@latest add <component-name>

Examples:

npx shadcn@latest add table
npx shadcn@latest add tabs
npx shadcn@latest add calendar

Do NOT manually create shadcn components - always use the CLI to ensure correct styling and dependencies.

Available Components

Components already installed in this project:

alert
alert-dialog
avatar
badge
breadcrumb
button
card
checkbox
collapsible
dialog
dropdown-menu
input, input-otp
label
navigation-menu
select
separator
sheet
sidebar
skeleton
sonner (toast notifications)
spinner
toggle, toggle-group
tooltip

Using Components

Always import from @/components/ui/:

Button Variants

{/_ Sizes _/} Small Default Large

Form Patterns

Use Label + Input together, with proper error styling:

Dialog Pattern

Toast Notifications

Use Sonner for toast notifications:

// Success toast.success('Changes saved successfully');

// Error toast.error('Something went wrong');

// With description toast.success('Project created', { description: 'Your new project is ready to use.', });

The cn() Utility

Use cn() from @/lib/utils to merge Tailwind classes conditionally:

Icons

Use Lucide React for icons:

---name: shadcndescription: How to work effectively with shadcn/ui components, always use when adding UI components---# shadcn/ui## InstructionsThis project uses shadcn/ui with the **New York** style variant. Components are built on Radix UI primitives with Tailwind CSS styling.### Configuration- Style: `new-york`- Base color: `neutral`- Icons: `lucide-react`- Components location: `resources/js/components/ui/`- Utils location: `resources/js/lib/utils.ts`### Adding New ComponentsUse the shadcn CLI to add components:```bashnpx shadcn@latest add <component-name>```Examples:```bashnpx shadcn@latest add tablenpx shadcn@latest add tabsnpx shadcn@latest add calendar```Do NOT manually create shadcn components - always use the CLI to ensure correct styling and dependencies.### Available ComponentsComponents already installed in this project:- `alert`- `alert-dialog`- `avatar`- `badge`- `breadcrumb`- `button`- `card`- `checkbox`- `collapsible`- `dialog`- `dropdown-menu`- `input`, `input-otp`- `label`- `navigation-menu`- `select`- `separator`- `sheet`- `sidebar`- `skeleton`- `sonner` (toast notifications)- `spinner`- `toggle`, `toggle-group`- `tooltip`### Using ComponentsAlways import from `@/components/ui/`:<code-snippet name="Importing shadcn Components" lang="tsx">import { Button } from '@/components/ui/button';import { Input } from '@/components/ui/input';import { Label } from '@/components/ui/label';import { Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';</code-snippet>### Button Variants<code-snippet name="Button Variants" lang="tsx"><Button>Default</Button><Button variant="secondary">Secondary</Button><Button variant="destructive">Destructive</Button><Button variant="outline">Outline</Button><Button variant="ghost">Ghost</Button><Button variant="link">Link</Button>{/_ Sizes _/}<Button size="sm">Small</Button><Button size="default">Default</Button><Button size="lg">Large</Button><Button size="icon"><IconComponent /></Button></code-snippet>### Form PatternsUse Label + Input together, with proper error styling:<code-snippet name="Form Field Pattern" lang="tsx">import { Label } from '@/components/ui/label';import { Input } from '@/components/ui/input';<div className="space-y-2"> <Label htmlFor="email">Email</Label> <Input id="email" name="email" type="email" placeholder="you@example.com" aria-invalid={!!errors.email} /> {errors.email && ( <p className="text-sm text-destructive">{errors.email}</p> )}</div></code-snippet>### Dialog Pattern<code-snippet name="Dialog Example" lang="tsx">import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger,} from '@/components/ui/dialog';<Dialog> <DialogTrigger asChild> <Button>Open Dialog</Button> </DialogTrigger> <DialogContent> <DialogHeader> <DialogTitle>Dialog Title</DialogTitle> <DialogDescription> Description text goes here. </DialogDescription> </DialogHeader> {/* Dialog content */} </DialogContent></Dialog></code-snippet>### Toast NotificationsUse Sonner for toast notifications:<code-snippet name="Toast Usage" lang="tsx">import { toast } from 'sonner';// Successtoast.success('Changes saved successfully');// Errortoast.error('Something went wrong');// With descriptiontoast.success('Project created', {description: 'Your new project is ready to use.',});</code-snippet>### The cn() UtilityUse `cn()` from `@/lib/utils` to merge Tailwind classes conditionally:<code-snippet name="cn() Usage" lang="tsx">import { cn } from '@/lib/utils';<div className={cn( 'rounded-lg border p-4', isActive && 'border-primary bg-primary/10', className)}> {children}</div></code-snippet>### IconsUse Lucide React for icons:<code-snippet name="Icon Usage" lang="tsx">import { Plus, Trash2, Edit, ChevronRight } from 'lucide-react';<Button> <Plus /> Add Item</Button><Button variant="ghost" size="icon"> <Trash2 /></Button></code-snippet>

Frequently asked questions

Shadcn