10.7k
New

CLI

PreviousNext

Use the shadcn-vue CLI to add components to your project.

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, reka-sera)
  -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, luma, sera)
  --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.
  --pointer                      enable pointer cursor for buttons.
  --no-pointer                   disable pointer cursor for buttons.
  --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 command

The 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]

A component can be named in any of these ways:

FormResolves to
buttonan item in the default shadcn-vue registry
@acme/buttonan item in a registry configured under registries in components.json
https://acme.com/r/button.jsona registry item fetched directly from that URL
./button.jsona registry item on disk
owner/repo/buttonan item in the root registry.json of a public GitHub repository
owner/repo/button#v1.0.0the same, pinned to a branch, tag or commit

See Install from GitHub for the GitHub form.

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)
  -h, --help           display help for command

apply

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 command

view

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 command

search

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 command

build

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 command

To 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 command

info

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 command

migrate

Use the migrate command to run migrations on your project.

pnpm dlx shadcn-vue@latest migrate [migration]

Available Migrations

MigrationDescription
cnMigrate clsx and tailwind-merge to cn.
iconsMigrate your UI components to a different icon library.
rtlMigrate 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 command

migrate cn

The cn migration replaces clsx and tailwind-merge with cn.

pnpm dlx shadcn-vue@latest migrate cn

Unlike the other migrations, migrate cn does not need a components.json file. You can run it in any JavaScript or TypeScript project that uses Tailwind CSS v4.

This will:

  1. Rewrite imports from clsx, clsx/lite and tailwind-merge in <script> blocks of .vue files and in .ts and .js files.
  2. Replace twMerge(clsx(...)) calls with direct cn(...) calls.
  3. Replace the standard lib/utils.ts helper with a direct re-export.
  4. Install cn, and remove the old packages once nothing references them.

Before

import type { ClassValue } from 'clsx'
import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

After

export { cn } from 'cn'

If you use clsx or twMerge on their own, the migration keeps them as they are and imports them from cn instead:

// Before
import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

// After
import { clsx, twMerge } from 'cn'

Custom configuration APIs move to cn/config. If an export was renamed, your existing local name is kept:

// Before
import { createTailwindMerge, getDefaultConfig } from 'tailwind-merge'

// After
import {
  createTwMerge as createTailwindMerge,
  defaultConfig as getDefaultConfig,
} from 'cn/config'

Migrate specific files

You can migrate a file, a directory or a glob pattern:

# Migrate a specific file.
npx shadcn-vue@latest migrate cn src/lib/utils.ts

# Migrate files matching a glob pattern.
npx shadcn-vue@latest migrate cn "src/**/*.{ts,vue}"

A scoped migration installs cn but keeps clsx and tailwind-merge in package.json, because files outside the selected path may still use them.

Imports the migration can't handle safely stay unchanged and are listed for manual review. These include experimentalParseClassName, namespace imports, dynamic imports, direct calls to validators, and createTailwindMerge calls with a variable number of arguments. An old package stays installed as long as anything still references it.

migrate rtl

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

pnpm dlx shadcn-vue@latest migrate rtl

This will:

  1. Update components.json to set rtl: true
  2. Transform physical CSS properties to logical equivalents (e.g., ml-4 → ms-4, text-left → text-start)
  3. 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).

AstroJavaScript