shadcn-vue-skilld

shadcn-vue

版本：[email protected]（准备好的源代码 package.json:4；npm latest dist-tag，检查于 2026-09-22）。 技术栈：Vue 3.5+、reka-ui ^2.10.1、Tailwind CSS ^4.3.2（package.json:68,88,91）。基础仅有一种：reka。 使用 pnpm dlx shadcn-vue@latest <command>（或 npx、npm exec、bunx）运行 CLI。

功能

CLI 会将组件源文件复制到你的项目中，并安装其 npm 依赖。 复制的代码由你掌控。可以自由编辑 components/ui/**；使用 -o, --overwrite 再次运行 add 会替换你的修改。

核心工作流

# New or existing project: write components.json, install deps, set up CSS
pnpm dlx shadcn-vue@latest init

# Add components (also: URL, local file, @namespace/item, owner/repo/item)
pnpm dlx shadcn-vue@latest add button card dialog

# Preview without writing, then install
pnpm dlx shadcn-vue@latest add sidebar --dry-run
pnpm dlx shadcn-vue@latest add sidebar

# Usage docs and examples for a component
pnpm dlx shadcn-vue@latest docs button

避免错误的规则

• 项目名称按以下顺序解析：URL、本地文件、@namespace/item、owner/repo/item[#ref]，最后是在默认 registry 中的普通名称（dist/registry-hxzbzXMt.js:1870-1891，https://www.shadcn-vue.com/docs/cli#add）。
• 在 2.8.x 中，预设名称没有前缀：vega、nova、maia、lyra、mira、luma、sera（dist/registry-hxzbzXMt.js:3141-3244）。较早的文档和 2.6.x 基线使用 reka-vega 这类名称；这些名称现在会失效。参见变更。
• toast 和 toaster 已弃用；请使用 sonner（dist/transform-menu-CLNZ5vUh.js:446-454）。
• lucide-vue-next 是旧版图标包；当前的 lucide 包是 @lucide/vue（dist/transform-menu-CLNZ5vUh.js:457、dist/icons/index.d.ts:3-10）。运行 migrate icons 可切换图标库。
• Registry 样式 ID 保留前缀：vega 样式会从 reka-vega 获取（dist/registry-hxzbzXMt.js:492-496）。备用样式 ID 为 new-york-v4。
• apply <preset> 会重写 UI 组件、字体和 CSS 变量。请先提交更改；CLI 也会发出同样的警告（dist/index.js:2252-2254）。
• Registry 环境变量：SHADCN_VUE_URL 和 REGISTRY_URL 会覆盖默认值 https://shadcn-vue.com/r（dist/transform-menu-CLNZ5vUh.js:2-3）。可用于本地 registry 测试。
• 内置命名空间是 @shadcn（dist/transform-menu-CLNZ5vUh.js:445）。必须在 components.json 的 registries 中配置第三方命名空间。

命令一览

命令	用途	关键选项
init（别名 create）	设置项目，写入 components.json	-p <preset>、-t <template>、--style、--icon-library、--font、-b <base-color>、-d、--silent
add	安装项目	-o、-a、-p <path>、--dry-run、--diff、--view
apply	将预设应用到现有项目	-y
view	安装前检查项目	-c <cwd>
search（别名 list）	模糊搜索 registries（@name 参数）	-q、-l、-o
docs	组件文档和示例	--json、-b <base>
info	项目设置报告	--json
diff	比较已安装项目与 registry 中的项目	-y
migrate	icons 或 rtl 迁移	-l、[path]
build	将 registry.json 构建为 registry JSON	-o <path>
mcp init	写入 MCP 客户端配置	--client claude|cursor|vscode

完整选项：CLI 参考。

配置

项目根目录下的 components.json 控制所有内容。关键字段：style、typescript、tailwind.css、tailwind.baseColor、aliases、iconLibrary、rtl、pointer、menuColor、menuAccent、registries。 完整架构和示例：components-json 参考。

样式和预设

七个具名预设（vega 至 sera）、编码预设代码中有八种有效样式（另含 rhea）、五种图标库、24 种字体。详情和表格：样式参考。

编程 API

从 shadcn-vue、shadcn-vue/registry、shadcn-vue/schema、shadcn-vue/utils、shadcn-vue/icons、shadcn-vue/preset、shadcn-vue/mcp、shadcn-vue/tailwind.css 导入（package.json:27-59）。 导出项和错误类：registries 参考。

参考资料

• 命令行参考
• components.json
• 样式和预设
• 注册表和编程接口
• MCP 服务
• 2.7 和 2.8 版本的变更