113k
New

shadcn

PreviousNext

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

init

使用 init 命令来初始化现有项目的配置和依赖项，或使用 --name 创建新项目。

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

pnpm dlx shadcn@latest init

选项

用法：shadcn init [options] [components...]
 
初始化您的项目并安装依赖项
 
参数：
  components                 组件名称、URL 或本地路径
 
选项：
  -t, --template <template>  要使用的模板。（next, vite, start, react-router, laravel, astro）
  -b, --base <base>          要使用的组件库。（radix, base）
  -p, --preset [name]        使用预设配置
  -y, --yes                  跳过确认提示。（默认值：true）
  -d, --defaults             使用默认配置：--template=next --preset=nova（默认值：false）
  -f, --force                强制覆盖现有配置。（默认值：false）
  -c, --cwd <cwd>            工作目录。默认为当前目录。
  -n, --name <name>          新项目的名称。
  -s, --silent               静默输出。（默认值：false）
  --css-variables            使用 CSS 变量进行主题设置。（默认值：true）
  --no-css-variables         不使用 CSS 变量进行主题设置。
  --monorepo                 搭建 monorepo 项目。
  --no-monorepo              跳过 monorepo 提示。
  --rtl                      启用 RTL 支持。
  --no-rtl                   禁用 RTL 支持。
  --reinstall                重新安装现有 UI 组件。
  --no-reinstall             不重新安装现有 UI 组件。
  -h, --help                 显示命令帮助

create 命令是 init 的别名：

pnpm dlx shadcn@latest create

add

使用 add 命令向项目中添加组件和依赖项。

pnpm dlx shadcn@latest add [component]

选项

用法：shadcn add [options] [components...]
 
向您的项目添加组件
 
参数：
  components           组件名称、URL 或本地路径
 
选项：
  -y, --yes            跳过确认提示。（默认值：false）
  -o, --overwrite      覆盖现有文件。（默认值：false）
  -c, --cwd <cwd>      工作目录。默认为当前目录。
  -a, --all            添加所有可用组件（默认值：false）
  -p, --path <path>    添加组件的路径。
  -s, --silent         静默输出。（默认值：false）
  --dry-run            预览更改而不写入文件。（默认值：false）
  --diff [path]        显示文件的差异。
  --view [path]        显示文件内容。
  -h, --help           显示命令帮助

apply

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

pnpm dlx shadcn@latest apply --preset a2r6bw

选项

用法：shadcn apply [options] [preset]
 
将预设应用于现有项目
 
参数：
  preset             要应用的预设
 
选项：
  --preset <preset>  要应用的预设配置
  -y, --yes          跳过确认提示。（默认值：false）
  -c, --cwd <cwd>    工作目录。默认为当前目录。
  -s, --silent       静默输出。（默认值：false）
  -h, --help         显示命令帮助

view

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

pnpm dlx shadcn@latest view [item]

您可以同时查看多个项目：

pnpm dlx shadcn@latest view button card dialog

也可以查看命名空间注册表中的项目：

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

选项

用法：shadcn view [options] <items...>
 
从注册表中查看项目
 
参数：
  items            要查看的项目名称或 URL
 
选项：
  -c, --cwd <cwd>  工作目录，默认当前目录。
  -h, --help       显示命令帮助信息

search

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

pnpm dlx shadcn@latest search [registry]

您可以带查询词进行搜索：

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

或者同时搜索多个注册表：

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

list 命令是 search 的别名：

pnpm dlx shadcn@latest list @acme

选项

用法：shadcn search|list [options] <registries...>
 
从注册表中搜索项目
 
参数：
  registries             要搜索的注册表名称或 URL，名称必须以 @ 开头。
 
选项：
  -c, --cwd <cwd>        工作目录，默认当前目录。
  -q, --query <query>    查询字符串
  -l, --limit <number>   每个注册表显示的最大项目数量（默认值："100"）
  -o, --offset <number>  跳过的项目数（默认值："0"）
  -h, --help             显示命令帮助信息

build

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

pnpm dlx shadcn@latest build

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

选项

用法：shadcn build [options] [registry]
 
为 shadcn 注册表构建组件
 
参数：
  registry             registry.json 文件路径（默认值："./registry.json"）
 
选项：
  -o, --output <path>  JSON 文件的输出目录（默认值："./public/r"）
  -c, --cwd <cwd>      工作目录，默认当前目录。
  -h, --help           显示命令帮助信息

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

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

docs

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

pnpm dlx shadcn@latest docs [component]

选项

用法：shadcn docs [options] [component]
 
获取组件的文档和 API 参考
 
参数：
  component          要获取文档的组件名称
 
选项：
  -c, --cwd <cwd>    工作目录，默认当前目录。
  -b, --base <base>  使用的基础库，'base' 或 'radix'，默认使用项目基础设置。
  --json             以 JSON 格式输出。（默认值：false）
  -h, --help         显示命令帮助信息

info

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

pnpm dlx shadcn@latest info

选项

用法：shadcn info [options]
 
获取您的项目相关信息
 
选项：
  -c, --cwd <cwd>  工作目录，默认当前目录。
  --json            以 JSON 格式输出。（默认值：false）
  -h, --help        显示命令帮助信息

migrate

使用 migrate 命令对您的项目运行迁移操作。

pnpm dlx shadcn@latest migrate [migration]

可用的迁移

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

选项

用法：shadcn migrate [options] [migration] [path]
 
运行迁移。
 
参数：
  migration        要运行的迁移名称。
  path             可选的路径或 glob 模式，用于迁移。
 
选项：
  -c, --cwd <cwd>  工作目录，默认当前目录。
  -l, --list       列出所有迁移。（默认值：false）
  -y, --yes        跳过确认提示。（默认值：false）
  -h, --help       显示命令帮助信息

migrate rtl

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

pnpm dlx shadcn@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 模式：

# 迁移特定文件
npx shadcn@latest migrate rtl src/components/ui/button.tsx
 
# 迁移匹配 glob 模式的文件
npx shadcn@latest migrate rtl "src/components/ui/**"

如果未提供路径，迁移将转换 components.json 中您的 ui 目录下的所有文件。

migrate radix

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

pnpm dlx shadcn@latest migrate radix

此操作将：

  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"

迁移特定文件

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

# 迁移特定文件
npx shadcn@latest migrate radix src/components/ui/dialog.tsx
 
# 迁移匹配 glob 模式的文件
npx shadcn@latest migrate radix "src/components/ui/**"

如果未提供路径，迁移将转换 components.json 中您的 ui 目录下的所有文件。

迁移完成后，您可以从 package.json 中移除未使用的 @radix-ui/react-* 包。