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/ 手寫筆記 /why-shadcn-ui-is-so-popular-in-2023-0f95e66f3ddc
shadcn/ui 是 Vercel 的工程师推出的一款组件合集，建立在 Tailwind CSS 和 Radix UI 之上，目前包括近 50 个独立组件。根据官方说明，这款产品被定义为「组件合集」，而非传统的「组件库」。
Shadcn UI 的特色
完整的无障碍体验：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 也存在一些新的挑战和问题
由于 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 组件库开发》这本书。
它是市面上第一本关于 UI 组件库开发实战的书。
它可以为读者提供 “UI 组件库视觉设计规范” 、“Gitee 代码仓库源码” 等配套资料。
你可以从中学到以下核心知识。
UI 组件开发：包含常用的组件，如 Button、Input、Checkbox、Radio、Message、Modal 等组件。
组件样式 OOCSS 设计：BEM 命名规则、Sass 制定全局变量。
UI 组件库文档搭建：解析 Markdown 文件映射组件，生成组件库文档。
Rollup 打包：全量打包、按需加载打包 UI 组件库。
Gulp 多任务：基于流（Stream）的自动化构建工具，使用 Gulp 实现组件库列表打包任务。
Npm 部署：将自己开发的组件库发布到 npm 官网，实现 npm install 安装自己的组件库。
从本书中学习到 UI 组件库的核心知识，从而掌握组件库的开发并深入理解组件库的运作逻辑，完整实现 UI 组件库的 UI 渲染、逻辑交互、功能扩展等多方面的高度制定化，轻松开发属于自己的 UI 组件库！
本书适合 Web 前端开发人员，需要提升自身开发能力或想开发属于自己的 UI 组件库的读者，以及有兴趣从事 Web 前端工作、想深入了解 UI 组件库底层逻辑的读者。
