109k
New

shadcn

PreviousNext

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

init

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

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

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 的别名：

pnpm dlx shadcn@latest create

add

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

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 命令在安装前查看注册表中的项目。

pnpm dlx shadcn@latest view [item]

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

pnpm dlx shadcn@latest view button card dialog

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

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

选项

Usage: shadcn view [options] <items...>
 
view items from the registry
 
Arguments:
  items            要查看的项目名称或 URL
 
Options:
  -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

选项

Usage: shadcn search|list [options] <registries...>
 
search items from registries
 
Arguments:
  registries             要搜索的注册表名称或 URL，名称必须以 @ 开头。
 
Options:
  -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 文件。

选项

Usage: shadcn build [options] [registry]
 
build components for a shadcn registry
 
Arguments:
  registry             registry.json 文件路径（默认值："./registry.json"）
 
Options:
  -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]

选项

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

info

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

pnpm dlx shadcn@latest info

选项

Usage: shadcn info [options]
 
get information about your project
 
Options:
  -c, --cwd <cwd>  工作目录，默认当前目录。
  --json            以 JSON 格式输出。（默认值：false）
  -h, --help        显示命令帮助信息

migrate

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

pnpm dlx shadcn@latest migrate [migration]

可用的迁移

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

选项

Usage: shadcn migrate [options] [migration] [path]
 
run a migration.
 
Arguments:
  migration        要运行的迁移名称。
  path             可选的路径或 glob 模式，用于迁移。
 
Options:
  -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-* 包。