shadcn/ui

它解决什么问题

组件库的通病是：你只能用作者写好的 API。想改一个圆角尺寸，就得去翻 theme.config，或者干脆用 !important 硬盖。组件在 node_modules 里，你改不了，也不敢改。

shadcn/ui 换了个思路：它不是组件库，而是一套组件源码的生成器。

npx shadcn@latest init
npx shadcn@latest add button

执行完，Button 组件的完整源码就出现在 components/ui/button.tsx 里。它是 TypeScript，不是编译产物，你可以随意重命名、改样式、加逻辑。

为什么值得看

• 零依赖锁定：组件进了你的仓库，升级由你决定，不会因为上游发个 patch 就被动更新。
• 可读性优先：源码是给人读的。想知道这个组件怎么实现，直接打开文件。
• Tailwind 深度绑定：样式不是配置出来的，是真实的 class，改起来所见即所得。
• Registry 机制：add 命令背后是一个 registry，你可以自己写一个，让自己的团队复用内部组件。

前提条件

它完全依赖 Tailwind CSS 和 React（其他支持 Tailwind 的框架理论上也行）。如果你的项目不用 Tailwind，这套方案不适用。

另外要接受一点：组件升级需要手动比对 diff。个人项目无所谓，几十人的团队最好自己维护一个内部 registry，把上游更新同步进来。