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个独立组件。根据官方说明，这款产品被定义为「组件合集」，而非传统的「组件库」。
-
完整的无障碍体验：
Shadcn UI 建立于 Radix UI 上，而 Radix UI 所标榜的最大特色之一就是它的 Accessibility——所有元件都遵守 WAI-ARIA 标准规范，且有通过跨浏览器及多种辅助科技的测试。
-
代码完全由开发者控制：
Shadcn UI允许直接访问每个组件的源代码。这意味着可以根据项目的具体需求轻松调整代码，而无须受限于预定义的模板或样式。
-
避免不必要的依赖：
不把整个库作为依赖项添加，有助于减少项目体积，从而提升应用的加载速度。
-
精细控制与高度可定制：
每个组件都是独立的单元，可以单独使用和定制，这种模块化的设计不仅简化了个别组件的定制过程，也便于整体 UI 系统的扩展和维护。
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
由于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组件库都是被封装好的，底层是耦合的代码，很难进行更改。
-
如果你自己从未开发过UI组件库，那么将很难理解组件库的整体运行机制和整体流程。
-
如果你想深入理解组件库的整体运行机制和整体流程，学习如何UI组件库的开发过程，却无从下手。
-
如果你想寻找一本可以带你从零开始开发UI组件库，且相对完整的、体系化的UI组件库实战书籍。
那么推荐你阅读
《Vue.js 3 高级编程：UI组件库开发》
这本书。
它是
