折腾｜关于 Shadcn/ui 的那些事

This is not a component library. It is how you build your component library.

Shadcn/ui 像是摆在你面前的一块原石，没有直接打磨成品，而是递给你一把刻刀。

这也意味着，它并不是一个现成可用的“库”，而是一套让你自己动手打造组件体系的组件库。

01 它的“非库”特性

Shadcn/ui 给你的不是封装好的黑盒，而是组件源码。你复制到本地后，它就是你项目的一部分，与其他代码无异。

那好处显而易见：

• 完全可控：逻辑、样式、交互你都能直接改。
• 高度可定制：从 design token 到动效，你都可以按团队风格塑形。
• 设计统一：早期就能与项目的 UI 语言绑定，不必事后修补。

但它的代价也很真实：维护责任全在你。

02 从“拿来”到“养成”

初用 Shadcn/ui 时，只是把它当成“官方样式集”仅此而已，复制粘贴后就直接用，这种用法短期高效，而对于长期而言失控。（（（

而我的建议是，第一步先做基础设计层：

定义 design token

在 tailwind.config.ts 里声明颜色、间距、圆角、阴影的变量，组件全部吃变量，不直接写死值。

二次封装组件

官方的 Button、Card 等不要直接暴露，先包一层自己的版本，这样全局设计改动时不会满世界找文件。

03 更新与演进

Shadcn/ui 官方的组件实现会悄悄更新，但你的项目本地文件不会自动跟上。而想要最新的好东西？得自己动手去更新。

• 按需拉取 不搞全量同步，只更新我在用的那几个组件，省得引入一堆无关 diff。
• 手动对比 用 Git 把官方最新版本和我本地的实现做个 diff，看哪些是性能优化、哪些是 API 变更，再决定“要不要搬”。
• 设个更新日 想起来了就自己检查下....（我很懒就是了）

这样一来，更新变成了一种可控的节奏，而不是头脑一热的全盘替换。然后发现自己搞得乱七八糟。

04 折腾的意义

Shadcn/ui 吸引我的地方，不是它有多“全能”，而是它逼你动手。
不像那些“拎包入住”的 UI 库，给你一套现成的风格，然后你只能在框框里改一点边角。它更像是说：

喏，材料和工具给你了，房子自己盖。

这种模式一开始挺累的——要自己调颜色、改间距、封装逻辑……

但慢慢地，你会发现这个过程其实很爽。因为最后产出的，不是“某某库的组件”，而是你自己项目的语言。