🌐 Nodejs.cn
新建

shadcn

PreviousNext

使用 shadcn CLI 将组件添加到你的项目。

init

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

🌐 Use the init command to initialize configuration and dependencies for a new project.

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

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

pnpm dlx shadcn@latest init

选项

Usage: shadcn init [options] [components...]
 
initialize your project and install dependencies
 
Arguments:
  components              name, 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. (radix, base)
  -p, --preset [name]        use a preset configuration. (name, URL, or preset code)
  -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)
  --monorepo                 scaffold a monorepo project.
  --no-monorepo              skip the monorepo prompt.
  --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.
  -h, --help                 display help for command

create 命令是 init 的别名：

🌐 The create command is an alias for init:

pnpm dlx shadcn@latest create

add

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

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

pnpm dlx shadcn@latest add [component]

选项

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

view

在安装之前，使用 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

选项

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

使用 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

list 命令是 search 的别名：

🌐 The list command is an alias for search:

pnpm dlx shadcn@latest list @acme

选项

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

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

🌐 Use the build command to generate the registry JSON files.

pnpm dlx shadcn@latest build

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

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

选项

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

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

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

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

docs

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

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

pnpm dlx shadcn@latest docs [component]

选项

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 either 'base' or 'radix'. defaults to project base.
  --json             output as JSON. (default: false)
  -h, --help         display help for command

info

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

🌐 Use the info command to get information about your project.

pnpm dlx shadcn@latest info

选项

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

使用 migrate 命令在你的项目上运行迁移。

🌐 Use the migrate command to run migrations on your project.

pnpm dlx shadcn@latest migrate [migration]

可用迁移

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

选项

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

迁移 RTL

🌐 migrate rtl

rtl 迁移将你的组件转换为支持从右到左 (RTL) 的语言。

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

pnpm dlx shadcn@latest migrate rtl

这将会：

🌐 This will:

  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）

迁移特定文件

你可以迁移特定文件或使用通配符模式：

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

如果未提供路径，迁移将会转换你 ui 目录中的所有文件（来自 components.json）。

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

迁移基数

🌐 migrate radix

radix 迁移会将你从各个 @radix-ui/react-* 包的导入更新为统一的 radix-ui 包。

🌐 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:

  1. 将 @radix-ui/react-* 的导入转换为 radix-ui
  2. 将 radix-ui 软件包添加到你的 package.json

之前

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

之后

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

迁移特定文件

你可以迁移特定文件或使用通配符模式：

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

如果未提供路径，迁移将会转换你 ui 目录中的所有文件（来自 components.json）。

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

完成后，你可以从你的 package.json 中删除任何未使用的 @radix-ui/react-* 包。

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