介绍

这不是一个组件库,而是一套帮你搭建自己组件库的方法。

看一段 shadcn-vue 介绍视频

传统组件库的套路你应该熟:从 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 模型能搞懂你的组件怎么工作、给出改进建议,甚至造出能跟你现有设计融合的新组件。