Docs
CLI

CLI

使用命令行（CLI）向您的项目添加组件。

init

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

init 命令会安装依赖项，添加 cn 实用工具，配置 tailwind.config.js 以及项目的 CSS 变量。

npx shadcn-ui@latest init

您将被询问几个问题以配置 components.json：

是否希望使用 TypeScript（推荐）？否/是
您希望使用哪种样式？› 默认
您希望使用哪种颜色作为基础色？› 石板灰
您的全局 CSS 文件在哪里？› › app/globals.css
您是否希望为颜色使用 CSS 变量？› 否/是
您的 tailwind.config.js 位于何处？› tailwind.config.js
为组件配置导入别名：› @/components
为实用工具配置导入别名：› @/lib/utils
您是否正在使用 React 服务器组件？› 否/是

选项

用法：shadcn-ui init [options]

初始化您的项目并安装依赖项

选项：
  -y, --yes        跳过确认提示。（默认：false）
  -c, --cwd <cwd>  工作目录。默认为当前目录。
  -h, --help       显示命令的帮助信息

add

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

npx shadcn-ui@latest add [component]

您将看到一个组件列表供选择：

您希望添加哪些组件？ › 空格选择。A 切换全部。
输入以提交

◯  accordion
◯  alert
◯  alert-dialog
◯  aspect-ratio
◯  avatar
◯  badge
◯  button
◯  calendar
◯  card
◯  checkbox

选项

用法：shadcn-ui add [选项]... [components]...

向您的项目添加一个组件

参数：
  components         要添加的组件

选项：
  -y, --yes          跳过确认提示。（默认：false）
  -o, --overwrite    覆盖现有文件。（默认：false）
  -c, --cwd <cwd>    工作目录。默认为当前目录。
  -p, --path <path>  添加组件的路径。
  -h, --help         显示命令的帮助信息

diff (experimental)

您可以使用 diff 命令检查与注册表的更新。

运行以下命令获取有可用更新的组件列表：

npx shadcn-ui diff
以下组件有可用更新：
- alert
  - /path/to/my-app/components/ui/alert.tsx
- button
  - /path/to/my-app/components/ui/button.tsx
- toast
  - /path/to/my-app/components/ui/use-toast.ts
  - /path/to/my-app/components/ui/toaster.tsx

然后运行 diff [component] 查看变更：

npx shadcn-ui diff alert
const alertVariants = cva(
- "relative w-full rounded-lg border",
+ "relative w-full pl-12 rounded-lg border"
)

选项

用法：shadcn-ui diff [选项] [component]

检查与注册表的更新

参数：
  component        组件名称

选项：
  -y, --yes        跳过确认提示。（默认：false）
  -c, --cwd <cwd>  工作目录。默认为当前目录。
  -h, --help       显示命令的帮助信息
暗黑模式印刷格式 (Typography)