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.
Quickly add pre-built, customizable React components based on Radix UI and Tailwind CSS.
| 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) |
Forms: , , , , , , , ,
buttoninputlabelselectcheckboxradio-groupswitchtextareaformLayout: 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
npx shadcn@latest add button
npx shadcn@latest add form input label select
npx shadcn@latest add -y dialog
npx shadcn@latest add -o button
npx shadcn@latest view chart
npx shadcn@latest add button -p src/components/ui
| 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 |
src/ui/ in this project (configured in components.json)@/ path alias for importsComponent 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