Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Form
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Number Field
- Pagination
- Pin Input
- Popover
- Progress
- Radio Group
- Range Calendar
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Stepper
- Switch
- Table
- Tabs
- Tags Input
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Forms
Get Started
init
Use the init command to initialize configuration and dependencies for a new project.
The init command installs dependencies, adds the cn util and configures CSS variables for the project.
pnpm dlx shadcn-vue@latest init
Options
Usage: shadcn-vue init [options] [components...]
initialize your project and install dependencies
Arguments:
components names, url or local path to component
Options:
-p, --preset <preset> use a preset configuration or URL. (reka-vega, reka-nova, reka-maia, reka-lyra, reka-mira, reka-luma)
-t, --template <template> the template to use. (nuxt, vite, astro, laravel)
--base <base> the component library base to use. (reka)
--style <style> the visual style to use. (vega, nova, maia, lyra, mira)
--icon-library <icon-library> the icon library to use. (lucide, tabler, hugeicons, phosphor, remixicon)
--font <font> the font to use. (inter, figtree, jetbrains-mono, geist, geist-mono)
-b, --base-color <base-color> the base color to use. (neutral, gray, zinc, stone, slate)
-n, --name <name> the name for the new project.
-d, --defaults use default configuration. (default: false)
-y, --yes skip confirmation prompt. (default: true)
-f, --force force overwrite of existing configuration. (default: false)
-c, --cwd <cwd> the working directory. defaults to the current directory.
-s, --silent mute output. (default: false)
--src-dir use the src directory when creating a new project. (default: false)
--no-src-dir do not use the src directory when creating a new project.
--reinstall re-install existing UI components.
--no-reinstall do not re-install existing UI components.
--rtl enable RTL support.
--no-rtl disable RTL support.
--css-variables use css variables for theming. (default: true)
--no-css-variables do not use css variables for theming.
--no-base-style do not install the base shadcn style.
-h, --help display help for commandThe create command is an alias for init:
pnpm dlx shadcn-vue@latest create
add
Use the add command to add components and dependencies to your project.
pnpm dlx shadcn-vue@latest add [component]
Options
Usage: shadcn-vue add [options] [components...]
add a component to your project
Arguments:
components names, 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 commandapply
Use the apply command to apply a preset to an existing project.
pnpm dlx shadcn-vue@latest apply --preset nova
Options
Usage: shadcn-vue apply [options] [preset]
apply a preset to an existing project
Arguments:
preset the preset to apply
Options:
--preset <preset> preset configuration to apply
-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 commandview
Use the view command to view items from the registry before installing them.
pnpm dlx shadcn-vue@latest view [item]
You can view multiple items at once:
pnpm dlx shadcn-vue@latest view button card dialog
Or view items from namespaced registries:
pnpm dlx shadcn-vue@latest view @acme/auth @v0/dashboard
Options
Usage: shadcn-vue 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 commandsearch
Use the search command to search for items from registries.
pnpm dlx shadcn-vue@latest search [registry]
You can search with a query:
pnpm dlx shadcn-vue@latest search @shadcn-vue -q "button"
Or search multiple registries at once:
pnpm dlx shadcn-vue@latest search @shadcn-vue @v0 @acme
The list command is an alias for search:
pnpm dlx shadcn-vue@latest list @acme
Options
Usage: shadcn-vue 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 commandbuild
Use the build command to generate the registry JSON files.
pnpm dlx shadcn-vue@latest build
This command reads the registry.json file and generates the registry JSON files in the public/r directory.
Options
Usage: shadcn-vue build [options] [registry]
build components for a shadcn-vue 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 commandTo customize the output directory, use the --output option.
pnpm dlx shadcn-vue@latest build --output ./public/registry
docs
Use the docs command to fetch documentation and API references for components.
pnpm dlx shadcn-vue@latest docs [component]
Options
Usage: shadcn-vue docs [options] <components...>
get docs, api references and usage examples for components
Arguments:
components component names
Options:
-c, --cwd <cwd> the working directory. defaults to the current directory.
-b, --base <base> the base to use (reka). defaults to project base.
--json output as JSON. (default: false)
-h, --help display help for commandinfo
Use the info command to get information about your project.
pnpm dlx shadcn-vue@latest info
Options
Usage: shadcn-vue 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 commandmigrate
Use the migrate command to run migrations on your project.
pnpm dlx shadcn-vue@latest migrate [migration]
Available Migrations
| Migration | Description |
|---|---|
icons | Migrate your UI components to a different icon library. |
rtl | Migrate your components to support RTL (right-to-left). |
Options
Usage: shadcn-vue 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)
-h, --help display help for commandmigrate rtl
The rtl migration transforms your components to support RTL (right-to-left) languages.
pnpm dlx shadcn-vue@latest migrate rtl
This will:
- Update
components.jsonto setrtl: 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-vue@latest migrate rtl src/components/ui/button/Button.vue
# Migrate files matching a glob pattern
npx shadcn-vue@latest migrate rtl "src/components/ui/**"If no path is provided, the migration will transform all files in your ui directory (from components.json).