Skip to main content
The add command adds components to your project. It fetches components from the registry, transforms them based on your configuration, and installs them with all dependencies.

​
Usage

shadcn add [components...]

​
Arguments

​
components
string[]
Names, URL, or local path to components. If not provided, you’ll see an interactive component selector.

​
Options

​
--yes
boolean
default:"false"
Skip confirmation prompt.
​
--overwrite
boolean
default:"false"
Overwrite existing files.
​
--cwd
string
The working directory. Defaults to the current directory.
​
--all
boolean
default:"false"
Add all available components.
​
--path
string
The path to add the component to.
​
--silent
boolean
default:"false"
Mute output.
​
--src-dir
boolean
default:"false"
Use the src directory when creating a new project.
​
--no-src-dir
boolean
Do not use the src directory when creating a new project.
​
--css-variables
boolean
default:"true"
Use CSS variables for theming.
​
--no-css-variables
boolean
Do not use CSS variables for theming.

​
Examples

​
Add a single component

shadcn add button

​
Add multiple components

shadcn add button card dialog

​
Add with interactive selector

shadcn add
Displays an interactive list of all available components.

​
Add all components

shadcn add --all

​
Add and overwrite existing files

shadcn add button --overwrite

​
Add from a URL

shadcn add https://ui.shadcn.com/r/styles/new-york/button.json

​
Add from local path

shadcn add ./my-component.json

​
Add to a specific path

shadcn add button --path ./src/components/ui

​
Silent mode

shadcn add button --silent

​
What it does

  1. Checks for components.json (runs init if missing)
  2. Fetches component from the registry
  3. Resolves all component dependencies
  4. Transforms component code based on your configuration:
    • Updates import paths
    • Applies CSS variables or inline colors
    • Adjusts for TypeScript/JavaScript
    • Handles RSC (React Server Components)
  5. Installs npm dependencies
  6. Writes component files to your project

​
Registry types

The add command supports different registry item types:
  • registry:ui - UI components
  • registry:block - Larger UI blocks/sections
  • registry:hook - React hooks
  • registry:lib - Library utilities
  • registry:theme - Theme configurations
  • registry:style - Complete style systems
  • registry:base - Base configurations

​
Special handling

​
Styles and themes

When adding a registry:style or registry:theme, you’ll be warned that:
  • Existing CSS variables will be overwritten
  • Existing components may be affected
You’ll need to confirm before proceeding (unless using --yes).

​
Universal components

Some components are framework-agnostic and work across all project types without transformation.

​
Output

✔ Checking registry.
✔ Installing dependencies.
✔ Created 3 files:
  - components/ui/button.tsx
  - components/ui/button.stories.tsx
  - components/ui/button.test.tsx

Build docs developers (and LLMs) love

Get started for freeTalk to us