介绍
这不是一个组件库,而是一套帮你搭建自己组件库的方法。
传统组件库的套路你应该熟:从 NPM 装个包,import 进来用。这套办法在你想把某个组件改成贴合自己设计系统、或者想要个库里没有的组件时就卡壳了——你往往得把库的组件包一层、写一堆覆盖样式的 hack,或者把好几个 API 互不兼容的库混着用。
shadcn-vue 要解决的就是这个。它围绕下面几条原则来建:
- 开放代码(Open Code):组件代码最外层对你开放,随便改。
- 组合性(Composition):每个组件都用同一套可组合的接口,行为可预测。
- 分发(Distribution):一套扁平文件 schema 加命令行工具,让组件好分发。
- 美观的默认值(Beautiful Defaults):默认样式精心调过,开箱即用就好看。
- AI 友好(AI-Ready):代码开放,LLM 能读、能懂、能改进。
开放代码
shadcn-vue 直接把组件源码交到你手上,你想怎么定制、怎么扩展都行。这意味着:
- 完全透明:每个组件是怎么搭的,你看得一清二楚。
- 容易定制:组件的任何一处都能改,去贴合你的设计和功能需求。
- AI 集成:代码在手,LLM 读懂、甚至改进你的组件都很顺。
换成传统库,想改个按钮的行为,你得覆盖样式或者包一层;用 shadcn-vue,直接改按钮源码就行。
在「开放代码」模式下,怎么拉上游的更新?
shadcn-vue 走的是 headless(无样式内核)组件架构。也就是说,应用的核心部分能通过更新依赖拿到修复——比如更新 radix-ui 或 input-otp。
而最外层那部分(也就是离你设计系统最近的那层)不跟库的实现绑死,始终留给你改。
组合性
shadcn-vue 里每个组件都共享同一套可组合的接口。要是某个组件不存在,就把它引进来、改造成可组合的,再调样式让它跟设计系统的其它部分对齐、协同。
一套共享、可组合的接口,意味着对你的团队和 LLM 都可预测——你不用每碰到一个新组件(哪怕是第三方的)就重新学一套 API。
分发
shadcn-vue 同时也是一套代码分发系统:它定义了组件的 schema 和一个用来分发组件的 CLI。
- Schema:一个扁平文件结构,定义组件本身、它的依赖和属性。
- CLI:一个命令行工具,跨框架地把组件分发、安装到各个项目里。
你可以拿这套 schema 把自己的组件分发到别的项目,或者让 AI 基于现有 schema 生成全新的组件。
美观的默认值
shadcn-vue 带一大票组件,默认样式都精心调过,单独放着好看,凑在一起也协调:
- 开箱即好用:不用额外折腾,UI 就是干净、克制的样子。
- 统一的设计:组件之间天然搭调,每个都照着跟其它组件匹配来造,UI 保持一致。
- 容易改:想动哪里,覆盖、扩展默认值都很简单。
AI 友好
shadcn-vue 的设计让 AI 工具很好跟你的代码打交道。代码开放、API 一致,AI 模型能读、能懂,甚至能生成新组件。
一个 AI 模型能搞懂你的组件怎么工作、给出改进建议,甚至造出能跟你现有设计融合的新组件。