9.7k
新建

CLI

上一页下一页

使用 shadcn-vue CLI 将组件添加到您的项目中。

init

使用 init 命令初始化新项目的配置和依赖项。

init 命令会安装依赖项，添加 cn 工具，并为项目配置 CSS 变量。

pnpm dlx shadcn-vue@latest init

选项

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 command

create 命令是 init 的别名。

pnpm dlx shadcn-vue@latest create

add

使用 add 命令将组件和依赖项添加到您的项目中。

pnpm dlx shadcn-vue@latest add [component]

选项

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 command

apply

使用 apply 命令将预设应用到现有项目。

pnpm dlx shadcn-vue@latest apply --preset nova

选项

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

使用 view 命令在安装前查看注册表中的项目。

pnpm dlx shadcn-vue@latest view [item]

您可以一次查看多个项目

pnpm dlx shadcn-vue@latest view button card dialog

或者查看命名空间注册表中的项目

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

选项

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

使用 search 命令从注册表中搜索项目。

pnpm dlx shadcn-vue@latest search [registry]

您可以使用查询关键字进行搜索

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

或者一次搜索多个注册表

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

list 命令是 search 的别名。

pnpm dlx shadcn-vue@latest list @acme

选项

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

使用 build 命令生成注册表 JSON 文件。

pnpm dlx shadcn-vue@latest build

该命令会读取 registry.json 文件并在 public/r 目录中生成注册表 JSON 文件。

选项

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

要自定义输出目录，请使用 --output 选项。

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

docs

使用 docs 命令获取组件的文档和 API 参考。

pnpm dlx shadcn-vue@latest docs [component]

选项

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

使用 info 命令获取有关您项目的信息。

pnpm dlx shadcn-vue@latest info

选项

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

使用 migrate 命令对您的项目执行迁移。

pnpm dlx shadcn-vue@latest migrate [migration]

可用迁移

迁移描述
icons将您的 UI 组件迁移到不同的图标库。
rtl迁移您的组件以支持 RTL（从右到左）。

选项

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 rtl

rtl 迁移会将您的组件转换为支持 RTL（从右到左）语言。

pnpm dlx shadcn-vue@latest migrate rtl

这将：

  1. 更新 components.json 将 rtl: true 设置为真
  2. 将物理 CSS 属性转换为逻辑等效项（例如：ml-4 → ms-4，text-left → text-start）
  3. 在需要的地方添加 rtl: 变体（例如：space-x-4 → space-x-4 rtl:space-x-reverse）

迁移特定文件

您可以迁移特定文件或使用 glob 模式

# 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/**"

如果不提供路径，迁移将转换您 ui 目录中的所有文件（基于 components.json）。

AstroJavaScript