使用 CLI 向你的项目添加组件。

注意： 我们刚刚发布了新的 shadcn CLI。有关更多信息，请参阅 changelog。

init

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

init 命令安装依赖、添加 cn 工具、配置 tailwind.config.js 和 CSS 变量。

  1. pnpm dlx shadcn@latest init

你将会被问到一些问题来配置 components.json：

  1. 你想使用哪种样式？ › New York
  2. 你想使用什么颜色作为基础色？ › Zinc
  3. 你是否想使用 CSS 变量来设置颜色？ › no / yes

选项

  1. Usage: shadcn init [options] [components...]
  3. 初始化你的项目并安装依赖
  5. Arguments:
  6.   components         要添加的组件或组件的 URL。
  8. Options:
  9.   -d, --defaults    使用默认值，例如 new-york, zinc 和 CSS 变量。 (默认: false)
  10.   -f, --force       强制覆盖现有的 components.json。 (默认: false)
  11.   -y, --yes         跳过确认提示。 (默认: false)
  12.   -c, --cwd <cwd>   工作目录，默认是当前目录。
  13.   -h, --help        显示命令帮助

add

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

  1. pnpm dlx shadcn@latest add [component]

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

  1. 你想添加哪些组件？ › Space 选择，A 切换全选。
  2. Enter 提交。
  4. ◯  accordion
  5. ◯  alert
  6. ◯  alert-dialog
  7. ◯  aspect-ratio
  8. ◯  avatar
  9. ◯  badge
  10. ◯  button
  11. ◯  calendar
  12. ◯  card
  13. ◯  checkbox

选项

  1. Usage: shadcn add [options] [components...]
  3. 将组件添加到你的项目中
  5. Arguments:
  6.   components         要添加的组件或组件的 URL。
  8. Options:
  9.   -y, --yes          跳过确认提示。 (默认: false)
  10.   -o, --overwrite    覆盖现有文件。 (默认: false)
  11.   -c, --cwd <cwd>    工作目录，默认是当前目录。
  12.   -a, --all          添加所有可用的组件。 (默认: false)
  13.   -p, --path <path>  要添加组件的路径。
  14.   -h, --help         显示命令帮助

build

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

  1. pnpm dlx shadcn@latest build

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

  1. Usage: shadcn build [options] [registry]
  3. 为 shadcn 注册表构建组件
  5. Arguments:
  6.   registry             registry.json 文件的路径（默认: "./registry.json"）
  8. Options:
  9.   -o, --output <path>  JSON 文件的输出目录（默认: "./public/r"）
  10.   -c, --cwd <cwd>      工作目录，默认是当前目录。 (默认: "/Users/shadcn/Code/shadcn/ui/packages/shadcn")
  11.   -h, --help           显示命令帮助

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

pnpm npmyarn bun

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