CLI 命令行工具

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

init

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

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

bash复制
npx shadcn@latest init

创建一个新项目：

bash复制
npx shadcn@latest init --name my-app --template next

create 命令是 init 的别名：

bash复制
npx shadcn@latest create --name my-app --template next

选项：

add

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

bash复制
npx shadcn@latest add button
npx shadcn@latest add button card alert
npx shadcn@latest add --all
npx shadcn@latest add https://registry.example.com/button
npx shadcn@latest add @acme/button
npx shadcn@latest add github:username/repo/button

选项：

apply

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

bash复制
npx shadcn@latest apply <preset-code>

您可以仅应用预设中的主题或字体，而无需重新安装 UI 组件：

bash复制
npx shadcn@latest apply <preset-code> --only theme
npx shadcn@latest apply <preset-code> --only font

支持的 --only 值：theme、font。

选项：

preset

使用 preset 命令检查预设代码并解析现有项目的预设。

bash复制
npx shadcn@latest preset <subcommand> [options]

preset decode

解码预设代码：

bash复制
npx shadcn@latest preset decode <code>

选项： --json（JSON 格式输出）

preset resolve

解析当前项目的预设：

bash复制
npx shadcn@latest preset resolve

preset info 是 preset resolve 的别名：

bash复制
npx shadcn@latest preset info

选项： --json（JSON 格式输出）

preset url

打印预设代码的 create URL：

bash复制
npx shadcn@latest preset url <code>

选项： --copy（复制到剪贴板）

preset open

在浏览器中打开预设代码：

bash复制
npx shadcn@latest preset open <code>

选项： 无

view

在安装前查看注册表中的项目：

bash复制
npx shadcn@latest view button
npx shadcn@latest view button card alert
npx shadcn@latest view @acme/button

选项： 无

search

搜索注册表中的项目：

bash复制
npx shadcn@latest search
npx shadcn@latest search button
npx shadcn@latest search --registries @acme

list 命令是 search 的别名：

bash复制
npx shadcn@latest list

选项：

build

生成注册表 JSON 文件：

bash复制
npx shadcn@latest build

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

选项：

docs

获取组件的文档和 API 参考：

bash复制
npx shadcn@latest docs button

选项：

info

获取项目信息：

bash复制
npx shadcn@latest info

选项：

migrate

对项目运行迁移。

bash复制
npx shadcn@latest migrate <migration> [path]

可用迁移：

选项：

migrate rtl

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

bash复制
npx shadcn@latest migrate rtl [path]

这将：

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）

迁移特定文件：

bash复制
npx shadcn@latest migrate rtl src/components/ui/**/*.tsx

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

migrate radix

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

bash复制
npx shadcn@latest migrate radix [path]

这将：

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

迁移前：

tsx复制
import * as Dialog from "@radix-ui/react-dialog"
import * as Popover from "@radix-ui/react-popover"

迁移后：

tsx复制
import * as Dialog from "radix-ui"
import * as Popover from "radix-ui"

迁移特定文件：

bash复制
npx shadcn@latest migrate radix src/components/ui/**/*.tsx

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

migrate icons

将 UI 组件迁移到不同的图标库。

eject

当您运行 init 时，shadcn 会在您的全局 CSS 文件中添加 @import "shadcn/tailwind.css"。此导入提供共享的 Tailwind v4 工具类，如自定义变体（data-open:、data-closed: 等）和手风琴动画。

使用 eject 命令将 shadcn/tailwind.css 内联到全局 CSS 文件中，并从项目中移除 shadcn 依赖。

注意：此操作不可逆。 弹出后，未来 shadcn CLI 对 shadcn/tailwind.css 的更新将不会自动应用。

bash复制
npx shadcn@latest eject

弹出前：

css复制
@import "tailwindcss";
@import "shadcn/tailwind.css";

弹出后：

css复制
@import "tailwindcss";

@custom-variant data-open (&:is([data-state=open] *));
@custom-variant data-closed (&:is([data-state=closed] *));
/* ...内联内容... */

Monorepo： 在包含 components.json 和全局 CSS 文件的工作区运行命令：

bash复制
cd apps/web && npx shadcn@latest eject

选项：

---