用了shadcn/ui之后，我再也不想手写组件了

📝

shadcn/ui 不是传统组件库，而是 copy-paste 组件——把组件源码直接复制进项目，代码归你所有。不用纠结选库、改样式不再 hack、没有版本焦虑，适合个人和小团队。

这不是一个组件库。它是一堆你可以直接复制到自己项目里的代码。

我第一次看到 shadcn/ui 的时候，没搞懂它到底是什么。官方说它不是一个组件库，但它明明提供了按钮、对话框、下拉菜单这些组件——不是组件库是什么？用了一段时间才理解它的设计理念。

传统组件库的问题

传统的组件库，Ant Design、Element Plus、Material UI，都是 npm install 一个包，然后在代码里引入组件。看起来很方便，但你把几百个组件的代码全部安装到了项目里，哪怕你只用到了其中几个。虽然也有按需引用的配置，但是用过都知道有多麻烦。

最关键的是你想改一个组件的样式，要么覆盖，要么等作者发新版本，最后导致很多项目的样式一言难尽，迫不得已必须要加上 !important。

shadcn/ui 是怎么工作的

但 shadcn/ui 不是这样工作的。

它的官方说法叫「copy-paste 组件」：你需要的组件不是打包引入，而是直接把组件源码复制到你的项目里。复制完之后，这些代码就是你的了。想怎么改就怎么改，不需要等任何人发版本，不需要覆盖样式，不需要处理依赖冲突。

它解决了什么问题

1. 不用再纠结选什么组件库

选组件库是一个很头疼的事。选 Ant Design，觉得太重；选轻量的，又怕后面功能不够；项目做了一半想换，基本不可能。

shadcn/ui 的方案是：你不用选。你需要什么组件就从它那里拿一个，不需要的就不要。项目里只会有你真正用到的组件代码。

2. 改样式不再需要 hack

用传统组件库的时候，改样式非常痛苦。主题变量只能覆盖一部分，深层的样式调整往往要靠覆盖和 !important。

shadcn/ui 的组件源码就在你的项目里，className 全是 Tailwind CSS，想怎么改就怎么改。不需要翻文档查「这个样式应该用哪个 token」，直接改 class 就行。

3. 没有版本管理的焦虑

传统组件库更新版本的时候，你永远不知道会不会 break 你的项目，大版本升级意味着大量的适配工作（当然现在有了 AI 还好点）。

shadcn/ui 没有版本概念。它更新了，你想用新版本？对比一下 diff，把改动复制过来就行。不想更新？那就用现在的，不会过期。

实际使用感受

我在 Jie.dev 里用了 shadcn/ui。

组件质量

基础的组件——按钮、输入框、对话框、下拉菜单——做得很好，交互和设计细节都很到位，不是「凑合能用」的水平。

但毕竟不是大型组件库，一些高级组件（复杂表格、树形选择、富文本编辑器）需要自己找别的方案，或者想办法封装。

上手成本

如果你会用 Tailwind CSS，上手几乎没有成本。组件都是 Tailwind 写的，样式结构一看就懂。如果你不会 Tailwind，那需要先学——shadcn/ui 不提供纯 CSS 版本。

和 Next.js 配合

shadcn/ui 对 Next.js 支持很好。它提供了一个 CLI 工具，可以直接把组件安装到项目里：

1	npx shadcn@latest add button

这个命令会把 Button 组件的源码放到 components/ui 目录下，自动配置好 Tailwind 和依赖。

适合什么人

一个人做项目，或者在小团队里开发，shadcn/ui 是一个很好的选择。它给你足够的灵活性和可控性，不会在你想自定义的时候挡路。

大团队需要严格组件规范的场景，传统组件库可能更合适。

对我来说，它正好是我需要的那种方案：该有的都有，不该有的别来烦我，我想改的时候别拦着我。只凭这几点，我就很推荐使用它。

参考链接

shadcn/ui 官网：https://ui.shadcn.com/
Jie.dev：https://jiepp.com/

原文：用了shadcn/ui之后，我再也不想手写组件了（作者：杨不圆）
本文转载自微信公众号，如有侵权请联系删除。