109k
新建

shadcn

上一页下一页

使用 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            the item names or URLs to view
 
Options:
  -c, --cwd <cwd>  the working directory. defaults to the current directory.
  -h, --help       display help for command

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             the registry names or urls to search items from. Names
                         must be prefixed with @.
 
Options:
  -c, --cwd <cwd>        the working directory. defaults to the current directory.
  -q, --query <query>    query string
  -l, --limit <number>   maximum number of items to display per registry (default: "100")
  -o, --offset <number>  number of items to skip (default: "0")
  -h, --help             display help for command

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             path to registry.json file (default: "./registry.json")
 
Options:
  -o, --output <path>  destination directory for json files (default: "./public/r")
  -c, --cwd <cwd>      the working directory. defaults to the current directory.
  -h, --help           display help for command

若要自定义输出目录，请使用 --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          the component to get docs for
 
Options:
  -c, --cwd <cwd>    the working directory. defaults to the current directory.
  -b, --base <base>  the base to use either 'base' or 'radix'. defaults to project base.
  --json             output as JSON. (default: false)
  -h, --help         display help for command

info

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

pnpm dlx shadcn@latest info

选项

Usage: shadcn info [options]
 
get information about your project
 
Options:
  -c, --cwd <cwd>  the working directory. defaults to the current directory.
  --json            output as JSON. (default: false)
  -h, --help        display help for command

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        the migration to run.
  path             optional path or glob pattern to migrate.
 
Options:
  -c, --cwd <cwd>  the working directory. defaults to the current directory.
  -l, --list       list all migrations. (default: false)
  -y, --yes        skip confirmation prompt. (default: false)
  -h, --help       display help for command

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 模式

# Migrate a specific file
npx shadcn@latest migrate rtl src/components/ui/button.tsx
 
# Migrate files matching a glob pattern
npx shadcn@latest migrate rtl "src/components/ui/**"

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

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 模式

# Migrate a specific file.
npx shadcn@latest migrate radix src/components/ui/dialog.tsx
 
# Migrate files matching a glob pattern.
npx shadcn@latest migrate radix "src/components/ui/**"

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

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