How do I install the Shadcn skill?

Run npx skillmds add majiayu000/shadcn-9 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.

Is Shadcn safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. 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?

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

Shadcn by majiayu000 — Agent Skill

Name: Shadcn
Rating: 4.5 (4 reviews)
Author: majiayu000

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.

majiayu000 62cd3e9 2 files · 3.9 KB Updated Sep 9, 2026 567 repo stars

File contents

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 in components.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

---name: shadcn-9description: 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.--- # 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 ```bash npx shadcn@latest add button ``` ### Add multiple related components ```bash npx shadcn@latest add form input label select ``` ### Skip confirmation prompts ```bash npx shadcn@latest add -y dialog ``` ### Overwrite existing component (after shadcn update) ```bash npx shadcn@latest add -o button ``` ### Preview before installing ```bash npx shadcn@latest view chart ``` ### Custom install path ```bash 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 in `components.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 ```bash npx shadcn@latest add -o button ``` **Missing dependencies**: The CLI auto-installs peer deps, but if issues occur: ```bash npm install @radix-ui/react-<primitive> class-variance-authority ``` **Path issues**: Check `components.json` for configured paths

Frequently asked questions