shadcn

Use the shadcn CLI to add components to your project.

init

Use the init command to initialize configuration and dependencies for an existing project, or create a new project with --name.

The init command installs dependencies, adds the cn util and configures CSS variables for the project.


pnpm dlx shadcn@latest init

Options

Usage: shadcn init [options] [components...]
 
initialize your project and install dependencies
 
Arguments:
  components                 names, url or local path to component
 
Options:
  -t, --template <template>  the template to use. (next, vite, start, react-router, laravel, astro)
  -b, --base <base>          the component library to use. (base, radix, aria)
  -p, --preset [name]        use a preset configuration
  -y, --yes                  skip confirmation prompt. (default: true)
  -d, --defaults             use default configuration: --template=next --preset=nova (default: false)
  -f, --force                force overwrite of existing configuration. (default: false)
  -c, --cwd <cwd>            the working directory. defaults to the current directory.
  -n, --name <name>          the name for the new project.
  -s, --silent               mute output. (default: false)
  --css-variables            use css variables for theming. (default: true)
  --no-css-variables         do not use css variables for theming.
  --monorepo                 scaffold a monorepo project.
  --no-monorepo              skip the monorepo prompt.
  --rtl                      enable RTL support.
  --no-rtl                   disable RTL support.
  --pointer                  enable pointer cursor for buttons.
  --no-pointer               disable pointer cursor for buttons.
  --reinstall                re-install existing UI components.
  --no-reinstall             do not re-install existing UI components.
  -h, --help                 display help for command

The create command is an alias for init:


pnpm dlx shadcn@latest create

add

Use the add command to add components and dependencies to your project.


pnpm dlx shadcn@latest add [component]

Options

Usage: shadcn add [options] [components...]
 
add a component to your project
 
Arguments:
  components           name, url or local path to component
 
Options:
  -y, --yes            skip confirmation prompt. (default: false)
  -o, --overwrite      overwrite existing files. (default: false)
  -c, --cwd <cwd>      the working directory. defaults to the current directory.
  -a, --all            add all available components (default: false)
  -p, --path <path>    the path to add the component to.
  -s, --silent         mute output. (default: false)
  --dry-run            preview changes without writing files. (default: false)
  --diff [path]        show diff for a file.
  --view [path]        show file contents.
  -h, --help           display help for command

apply

Use the apply command to apply a preset to an existing project.


pnpm dlx shadcn@latest apply a2r6bw

You can apply only the theme or fonts from a preset without reinstalling UI components:


pnpm dlx shadcn@latest apply a2r6bw --only theme

Supported values for --only are theme and font.

Options

Usage: shadcn apply [options] [preset]
 
apply a preset to an existing project
 
Arguments:
  preset             the preset to apply
 
Options:
  --preset <preset>  preset configuration to apply
  --only [parts]     apply only parts of a preset: theme, font
  -y, --yes          skip confirmation prompt. (default: false)
  -c, --cwd <cwd>    the working directory. defaults to the current directory.
  -s, --silent       mute output. (default: false)
  -h, --help         display help for command

preset

Use the preset command to inspect preset codes and resolve the preset for an existing project.


pnpm dlx shadcn@latest preset decode a2r6bw

preset decode

Use preset decode to decode a preset code.


pnpm dlx shadcn@latest preset decode a2r6bw

Options

Usage: shadcn preset decode [options] <code>
 
decode a preset code
 
Arguments:
  code        the preset code to decode
 
Options:
  --json      output as JSON. (default: false)
  -h, --help  display help for command

preset resolve

Use preset resolve to resolve the preset from the current project.


pnpm dlx shadcn@latest preset resolve

The preset info command is an alias for preset resolve:


pnpm dlx shadcn@latest preset info

Options

Usage: shadcn preset resolve|info [options]
 
resolve a preset from your project
 
Options:
  -c, --cwd <cwd>  the working directory. defaults to the current directory.
  --json            output as JSON. (default: false)
  -h, --help        display help for command

preset url

Use preset url to print the create URL for a preset code.


pnpm dlx shadcn@latest preset url a2r6bw

Options

Usage: shadcn preset url [options] <code>
 
get the create URL for a preset code
 
Arguments:
  code        the preset code
 
Options:
  -h, --help  display help for command

preset open

Use preset open to open a preset code in the browser.


pnpm dlx shadcn@latest preset open a2r6bw

Options

Usage: shadcn preset open [options] <code>
 
open a preset code in the browser
 
Arguments:
  code        the preset code
 
Options:
  -h, --help  display help for command

view

Use the view command to view items from the registry before installing them.


pnpm dlx shadcn@latest view [item]

You can view multiple items at once:


pnpm dlx shadcn@latest view button card dialog

Or view items from namespaced registries:


pnpm dlx shadcn@latest view @acme/auth @v0/dashboard

Options

Usage: shadcn view [options] <items...>
 
view items from the registry
 
Arguments:
  items            the item names or URLs to view
 
Options:
  -c, --cwd <cwd>  the working directory. defaults to the current directory.
  -h, --help       display help for command

search

Use the search command to search for items from registries.


pnpm dlx shadcn@latest search [registry]

You can search with a query:


pnpm dlx shadcn@latest search @shadcn -q "button"

Or search multiple registries at once:


pnpm dlx shadcn@latest search @shadcn @v0 @acme

The list command is an alias for search:


pnpm dlx shadcn@latest list @acme

Options

Usage: shadcn search|list [options] <registries...>
 
search items from registries
 
Arguments:
  registries             the registry names or urls to search items from. Names
                         must be prefixed with @.
 
Options:
  -c, --cwd <cwd>        the working directory. defaults to the current directory.
  -q, --query <query>    query string
  -l, --limit <number>   maximum number of items to display per registry (default: "100")
  -o, --offset <number>  number of items to skip (default: "0")
  -h, --help             display help for command

build

Use the build command to generate the registry JSON files.


pnpm dlx shadcn@latest build

This command reads the registry.json file and generates the registry JSON files in the public/r directory.

Options

Usage: shadcn build [options] [registry]
 
build components for a shadcn registry
 
Arguments:
  registry             path to registry.json file (default: "./registry.json")
 
Options:
  -o, --output <path>  destination directory for json files (default: "./public/r")
  -c, --cwd <cwd>      the working directory. defaults to the current directory.
  -h, --help           display help for command

To customize the output directory, use the --output option.


pnpm dlx shadcn@latest build --output ./public/registry

docs

Use the docs command to fetch documentation and API references for components.


pnpm dlx shadcn@latest docs [component]

Options

Usage: shadcn docs [options] [component]
 
fetch documentation and API references for components
 
Arguments:
  component          the component to get docs for
 
Options:
  -c, --cwd <cwd>    the working directory. defaults to the current directory.
  -b, --base <base>  the base to use: base, radix, or aria. defaults to project base.
  --json             output as JSON. (default: false)
  -h, --help         display help for command

info

Use the info command to get information about your project.


pnpm dlx shadcn@latest info

Options

Usage: shadcn info [options]
 
get information about your project
 
Options:
  -c, --cwd <cwd>  the working directory. defaults to the current directory.
  --json            output as JSON. (default: false)
  -h, --help        display help for command

migrate

Use the migrate command to run migrations on your project.


pnpm dlx shadcn@latest migrate [migration]

Available Migrations

Migration	Description
`icons`	Migrate your UI components to a different icon library.
`radix`	Migrate to radix-ui.
`rtl`	Migrate your components to support RTL (right-to-left).

Options

Usage: shadcn migrate [options] [migration] [path]
 
run a migration.
 
Arguments:
  migration        the migration to run.
  path             optional path or glob pattern to migrate.
 
Options:
  -c, --cwd <cwd>       the working directory. defaults to the current directory.
  -l, --list            list all migrations. (default: false)
  -y, --yes             skip confirmation prompt. (default: false)
  -f, --from <library>  the icon library to migrate from (icons migration only).
  -t, --to <library>    the icon library to migrate to (icons migration only).
  -h, --help            display help for command

migrate icons

The icons migration moves your components from one icon library to another.


pnpm dlx shadcn@latest migrate icons

This will prompt you for the source and target libraries, rewrite icon imports and JSX usage in your ui directory, install the target library and update iconLibrary in your components.json so future npx shadcn add installs use the new library.

The following libraries are supported: lucide, tabler, hugeicons, phosphor, remixicon and radix (legacy).

Non-interactive

Use --from and --to to skip the prompts:


pnpm dlx shadcn@latest migrate icons --from lucide --to phosphor --yes

Migrate specific files

You can migrate specific files or use glob patterns. Scoped runs do not update components.json.

# Migrate a specific file.
npx shadcn@latest migrate icons src/components/ui/button.tsx --from lucide --to tabler
 
# Migrate files matching a glob pattern.
npx shadcn@latest migrate icons "src/components/**" --from lucide --to tabler

Icons without an equivalent in the target library are left untouched and reported at the end of the migration.

migrate rtl

The rtl migration transforms your components to support RTL (right-to-left) languages.


pnpm dlx shadcn@latest migrate rtl

This will:

Update components.json to set rtl: true
Transform physical CSS properties to logical equivalents (e.g., ml-4 → ms-4, text-left → text-start)
Add rtl: variants where needed (e.g., space-x-4 → space-x-4 rtl:space-x-reverse)

Migrate specific files

You can migrate specific files or use glob patterns:

# Migrate a specific file
npx shadcn@latest migrate rtl src/components/ui/button.tsx
 
# Migrate files matching a glob pattern
npx shadcn@latest migrate rtl "src/components/ui/**"

If no path is provided, the migration will transform all files in your ui directory (from components.json).

migrate radix

The radix migration updates your imports from individual @radix-ui/react-* packages to the unified radix-ui package.


pnpm dlx shadcn@latest migrate radix

This will:

Transform imports from @radix-ui/react-* to radix-ui
Add the radix-ui package to your package.json

Before

import * as DialogPrimitive from "@radix-ui/react-dialog"
import * as SelectPrimitive from "@radix-ui/react-select"

After

import { Dialog as DialogPrimitive, Select as SelectPrimitive } from "radix-ui"

Migrate specific files

You can migrate specific files or use glob patterns:

# Migrate a specific file.
npx shadcn@latest migrate radix src/components/ui/dialog.tsx
 
# Migrate files matching a glob pattern.
npx shadcn@latest migrate radix "src/components/ui/**"

If no path is provided, the migration will transform all files in your ui directory (from components.json).

Once complete, you can remove any unused @radix-ui/react-* packages from your package.json.

eject

When you run init, shadcn adds @import "shadcn/tailwind.css" to your global CSS file. This import provides shared Tailwind v4 utilities such as custom variants (data-open:, data-closed:, etc.) and accordion animations.

Use the eject command to inline shadcn/tailwind.css into your global CSS file and remove the shadcn dependency from your project.

Note: This action is irreversible. After ejecting, future shadcn CLI updates to shadcn/tailwind.css will not apply automatically.


pnpm dlx shadcn@latest eject

Before

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

After

@import "tailwindcss";
@import "tw-animate-css";
/* ejected from shadcn@4.8.3 */
@theme inline {
  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(
        --radix-accordion-content-height,
        var(--accordion-panel-height, auto)
      );
    }
  }
}
 
@custom-variant data-open {
  &:where([data-state="open"]),
  &:where([data-open]:not([data-open="false"])) {
    @slot;
  }
}
 
@utility no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
 
  &::-webkit-scrollbar {
    display: none;
  }
}

Monorepo

In a monorepo, run the command from the workspace that contains your components.json and global CSS file:


pnpm dlx shadcn@latest eject -c packages/ui

Options

Usage: shadcn eject [options]
 
inline shadcn/tailwind.css and remove the shadcn dependency
 
Options:
  -c, --cwd <cwd>  the working directory. defaults to the current directory.
  -y, --yes        skip confirmation prompt. (default: false)
  -s, --silent     mute output. (default: false)
  -h, --help       display help for command

RTL Monorepo

On This Page

init add apply preset preset decode preset resolve preset url preset open view search build docs info migrate migrate icons migrate rtl migrate radix eject

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.