Agent skill
shadcn
Add and manage shadcn/ui components via CLI. Use when installing new UI components, building forms with validation, creating modals/dialogs/sheets, adding navigation menus, setting up data tables or charts, or updating existing shadcn components.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/shadcn-iamhenry-ai-project-starter-k
SKILL.md
shadcn/ui CLI
Quickly add pre-built, customizable React components based on Radix UI and Tailwind CSS.
Quick Reference
| Command | Purpose |
|---|---|
npx shadcn@latest add <component> |
Add single component |
npx shadcn@latest add btn dialog |
Add multiple components at once |
npx shadcn@latest add -a |
Add ALL components |
npx shadcn@latest add -o <component> |
Overwrite existing component |
npx shadcn@latest view <component> |
Preview component before install |
npx shadcn@latest init |
Initialize project (first-time) |
Common Component Groups
Forms: button, input, label, select, checkbox, radio-group, switch, textarea, form
Layout: card, separator, tabs, accordion, collapsible, resizable
Feedback: alert, alert-dialog, dialog, drawer, sheet, toast, sonner, tooltip, popover
Navigation: dropdown-menu, menubar, navigation-menu, breadcrumb, pagination, command
Data Display: table, data-table, avatar, badge, calendar, carousel, chart
Usage Patterns
Add a single component
npx shadcn@latest add button
Add multiple related components
npx shadcn@latest add form input label select
Skip confirmation prompts
npx shadcn@latest add -y dialog
Overwrite existing component (after shadcn update)
npx shadcn@latest add -o button
Preview before installing
npx shadcn@latest view chart
Custom install path
npx shadcn@latest add button -p src/components/ui
Key Flags
| Flag | Short | Description |
|---|---|---|
--yes |
-y |
Skip confirmation prompt |
--overwrite |
-o |
Overwrite existing files |
--all |
-a |
Install all components |
--path <path> |
-p |
Custom destination path |
--silent |
-s |
Suppress output |
Project Notes
- Components install to
src/ui/in this project (configured incomponents.json) - Uses
@/path alias for imports - Tailwind CSS + CVA (class-variance-authority) for variants
- All components are fully customizable after installation
Troubleshooting
Component already exists: Use -o flag to overwrite
npx shadcn@latest add -o button
Missing dependencies: The CLI auto-installs peer deps, but if issues occur:
npm install @radix-ui/react-<primitive> class-variance-authority
Path issues: Check components.json for configured paths
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?