一起学习Vue.js 3高级编程UI组件库实战

shadcn UI是一个新诞生的项目，也是2023年前端领域最火的项目之一。

shadcn UI发布于2023年1月，仅用1年时间，它在GitHub中的star数量就增长至 39.5k ，是2023年在GitHub上star增长最多的前端开源技术。

出自https://risingstars.js.org/2023/zh#section-all

2024年3月，shadcn UI项目的star数增长至50k，截至目前已达到75k，非常接近Ant Design的star数量。

这种成长速度非常惊人，shadcn/ui 究竟有什么魅力呢？为何大家都愿意贡献一颗star给它呢？

参考来源：https://medium.com/%E6%89%8B%E5%AF%AB%E7%AD%86%E8%A8%98/why-shadcn-ui-is-so-popular-in-2023-0f95e66f3ddc

shadcn/ui 是 Vercel 的工程师推出的一款组件合集，建立在 Tailwind CSS 和 Radix UI 之上，目前包括近50个独立组件。根据官方说明，这款产品被定义为「组件合集」，而非传统的「组件库」。

01

Shadcn UI 的特色

• 完整的无障碍体验：Shadcn UI 建立于 Radix UI 上，而 Radix UI 所标榜的最大特色之一就是它的 Accessibility——所有元件都遵守 WAI-ARIA 标准规范，且有通过跨浏览器及多种辅助科技的测试。
• 代码完全由开发者控制：Shadcn UI允许直接访问每个组件的源代码。这意味着可以根据项目的具体需求轻松调整代码，而无须受限于预定义的模板或样式。
• 避免不必要的依赖：不把整个库作为依赖项添加，有助于减少项目体积，从而提升应用的加载速度。
• 精细控制与高度可定制：每个组件都是独立的单元，可以单独使用和定制，这种模块化的设计不仅简化了个别组件的定制过程，也便于整体 UI 系统的扩展和维护。

02

Shadcn UI使用 Tailwind CSS 封裝 Radix UI

Tailwind CSS 无疑是近年来最常被提及的、实现了 atomic css 的 CSS 框架，而 Shadcn UI 则用 Tailwind CSS 封装了 Radix UI 的元件。

Radix UI 是一个 headless 组件库，这表示它的组件没有任何的样式，它提供了可以定制化样式的方式，让用户自定义组件的样式，将UI的全部样式交给使用者，实现业务需求的高度定制化。

参考来源：https://zhuanlan.zhihu.com/p/694048244

03

Shadcn UI也存在一些新的挑战和问题

由于Shadcn UI将全部UI样式交给了开发者，这种做法带来了新的挑战。

• 对开发者的要求较高：需要良好的抽象设计能力来处理无UI层的组件。
• 需要自己维护：只要开发者修改了其元件的样式，那么就需要开发者自己维护，所以维护也是个难以避免的问题。
• 需求无法满足：Radix UI 毕竟是小众的元件库，其star数只有 3.4K 而已，不足 Shadcn UI 的十分之一。如果遇到 bug 或是需要新功能，Radix UI能得到的社群资源相当有限。
• 全局样式的把握：不能只看一个组件的变化，还需要考虑全局UI样式的影响。
• 定制组件：Shadcn UI组件不如Ant Design组件的功能丰富，无法达到“开箱即用”的程度。

由此可以看出，对于开发者来说，若想要处理好UI组件的样式、全局的把握、定制新的组件，就需要有较高的思维、理解、结构布局等能力。

如果你在工作中使用 Ant Design 或Element Plus 组件库时，需要修改某个组件的功能或是变更组件的交互方式，基本上是难以实现的。因为Ant Design和Element Plus组件库都是被封装好的，底层是耦合的代码，很难进行更改。