用途
shadcn-vue 面向 Vue 3+ 或 Nuxt 3+ 项目，提供一套可访问、可定制的 UI 组件，底层使用 Reka UI v2（原 Radix Vue）与 Tailwind CSS。它适合需要构建管理后台、内容管理系统等界面的 Vue/Nuxt 应用。
主要能力
- 组件库：提供 50 多个组件，涵盖导航与布局（Accordion、Dialog、Dropdown Menu、Sidebar、Tabs、Toast、Tooltip 等）、表单（Auto Form、Button、Calendar、Checkbox、Combobox、Date Picker、Form、Input、Select、Slider、Switch、Textarea 等）、数据展示（Data Table、Skeleton、Stepper、Table、Tag Input 等）以及高级组件（Charts（Unovis）、Color Picker、Editable、File Upload、Sortable）。
- Auto Form：基于 Zod schema 生成表单，支持 string、number、boolean、date、enum、array、object 等字段类型。
- Data Table：基于 TanStack Table，支持排序、过滤、分页、行选择、列可见性、可展开行。
- 暗色模式：通过 @vueuse/core 的 useColorMode 与 ThemeProvider 实现主题切换。
- CLI：提供 init、add、diff 命令，支持单组件、多组件或全部组件添加，并支持 monorepo 中通过 -c 指定目录。
使用方式
Vue（Vite）项目：
- 初始化：
bunx shadcn-vue@latest init或npx shadcn-vue@latest init。初始化时需选择 Style（New York 或 Default，之后不可更改）、Base color（推荐 Slate）、CSS variables（暗色模式必需）。 - 配置 TypeScript 路径别名，在 tsconfig.json 中设置 baseUrl 与 paths（如
@/*指向./src/*）。 - 配置 Vite，引入 vue 与 tailwindcss 插件，并设置
@别名。 - 添加组件：
bunx shadcn-vue@latest add button。
Nuxt 项目：
- 创建项目并安装
@nuxtjs/tailwindcss。 - 在 nuxt.config.ts 中配置 modules。
- 运行
bunx shadcn-vue@latest init（或 npx / pnpm dlx）。
Auto Form 安装：bunx shadcn-vue@latest add auto-form，并安装 zod。
Data Table 安装：bunx shadcn-vue@latest add data-table，并安装 @tanstack/vue-table。
暗色模式安装：bun add @vueuse/core，然后创建 ThemeProvider 组件并使用 useColorMode。
CLI 命令：
init：初始化，支持-c指定目录。add：添加组件，支持多个组件名或--all。diff：检查组件更新。
适用场景
适用于 Vue/Nuxt 应用、管理后台、内容管理系统等需要可访问、可定制 UI 组件的场景。
限制与注意事项
- 初始化后不能更改 Style，否则需要重新安装。
- 不要混用 Radix Vue 与 Reka UI v2，两者 API 不兼容。
- 必须配置 TypeScript 路径别名，否则组件导入失败。
- 必须使用 Tailwind CSS，否则组件样式无法正确渲染。
- 需使用 CSS variables 以支持暗色模式。
- components.json 应纳入版本控制。
- monorepo 中需使用 -c 指定工作区目录。
- 安装依赖时建议遵循供应链安全实践：阻止 post-install 脚本、设置冷却期、安装前审计。
配置与工具
components.json 用于配置组件路径（@/components/ui）、工具位置（@/lib/utils）、Tailwind 配置路径与 TypeScript 路径。@/lib/utils.ts 提供 cn() 辅助函数，使用 clsx + tailwind-merge 合并 Tailwind 类名，由 init 自动生成。
资源
官方文档：https://shadcn-vue.com；Reka UI 文档：https://reka-ui.com；GitHub：https://github.com/radix-vue/shadcn-vue。组件示例：https://shadcn-vue.com/examples。