shadcn/vue

项目定位

shadcn/vue 是一个面向 Vue 生态的组件集合项目，核心理念并非提供传统的 npm 组件包，而是将组件源码直接复制到项目中。这种模式使开发者对组件实现拥有完全的控制权，可以按需修改样式与逻辑，而不必依赖第三方包的更新节奏。

核心特性

源码级使用方式

与常规组件库不同，shadcn/vue 通过 CLI 将组件源码写入项目的 components 目录。安装完成后，组件与业务代码处于同一层级，可直接编辑。这一设计消除了“黑盒”依赖，降低了定制成本。

设计质量与一致性

组件遵循简洁、克制的视觉风格，默认样式基于 CSS 变量构建，便于统一调整主题。组件覆盖表单、导航、反馈、数据展示等常见场景，结构语义化程度较高，适合作为中后台产品的起点。

技术栈适配

项目面向 Vue 3 + TypeScript，组件基于组合式 API 编写。样式层依赖 Tailwind CSS，同时需要 class-variance-authority、clsx、tailwind-merge 等工具库配合。对于使用 Vite 或 Nuxt 的项目，官方提供了对应的初始化指引。

使用前提

采用 shadcn/vue 需要项目满足以下条件：

如果项目尚未配置 Tailwind CSS，需要先完成基础设置，否则组件样式无法生效。

典型工作流

1. 在项目根目录执行初始化命令，生成组件目录结构与工具函数
2. 通过 add 命令选择所需组件，源码自动写入本地
3. 直接编辑组件文件以适配设计规范
4. 业务代码中按相对路径导入使用

适用场景评估

适合：需要高度定制设计系统的团队、希望避免组件库升级带来破坏性变更的项目、以 Tailwind CSS 为样式基础的新项目。

不太适合：追求开箱即用且不愿维护组件源码的场景、未使用 Tailwind CSS 的存量项目、对 Vue 2 仍有依赖的系统。

对于符合技术栈要求且重视长期可维护性的项目，shadcn/vue 提供了一种务实的选择。组件源码归属项目本身，意味着设计系统的演进不再受外部库的约束。