组件库现状与 Radix、shadcn/ui 的思考

理性选择组件库,理解开源之力

前言:组件库的又一轮讨论

Web 开发的潮流兜兜转转,我们又开始讨论组件库了。这很正常。随着 Radix 的更新频率降低,这个话题值得一谈。

实践建议与重要告诫

对于你已经在生产环境中运行的应用来说,现在能做的最糟糕的事情就是更换组件库。

千万别这么做。你的时间或资源不应该花在这上面。无论你在自己的应用里用 Radix 遇到了什么 bug,换成其他库,你很可能会遇到更多,其中还包括新 bug。(我不是在黑任何库,代码就是这么回事。)

是的,Radix 的更新是变少了。但 Radix 依然是一个成熟、设计精良、经过实战检验并且被数百万生产级应用所使用的库。代码不会因为维护者离开了就停止工作。这就是 开源 的力量。而且,在它所擅长的领域,Radix 依然做得非常出色。

针对不同场景的建议

  1. 已经在生产环境中使用 Radix? 请继续使用它。
  2. 正在开始一个新项目? 可以考虑 RadixReact AriaAriakit。它们都是很好的选择。
  3. 正在使用 Radix 并考虑下一步该用什么? 可以持续关注 Base UI(我们就在这么做)。它是由创建 Radix 的同一支聪明团队构建的。他们成功过一次,现在他们有机会再来一次,而且它看起来非常不错(目前处于 beta 测试阶段)。
  4. 用 Radix 遇到了 bug 并且找不到修复或补丁? 可以试试 Base UI 中相对应的组件。它们的 API 非常相似。
  5. shadcn 的设计就是为了应对这种情况。 代码归你所有。你可以改进、重写或替换这些代码。

最重要的一点是: 使用那些对你有效且你能够理解的东西。你的 组件库 应该是稳定的。在你的技术栈里,这部分不应该是你冒险的地方。

关于新项目的风险与耐心

每个新项目(不仅仅是 组件库)都会经历阵痛:bugAPI 变更功能缺失文档不全
耐心等待,让它成熟起来是明智的,特别是对于生产环境的应用而言。

shadcn/ui 的特殊定位

什么是 shadcn/ui?

shadcn(这名字起得有点不幸 😅)不是一个组件库,而是一种理念。它是几样东西的结合体:一个开放的抽象层一套出色的默认配置以及一个分发系统

  • 一个开放的抽象层, 构建于多个组件库之上,Radix 就是其中之一。这些代码就像是你自己会写的那样,但以一种更易于使用的方式组织起来。深受大语言模型(LLM)的喜爱。
  • 精心选择的默认配置, 处理了诸如焦点状态、动画样式、变体以及组件间的自然协调这样的小细节。这些配置恰到好处,既能作为一个出色的起点,又能在你准备构建自己的设计系统时功成身退,不碍手碍脚。
  • 一个分发系统, 让你能轻松地构建、生成和共享代码。为 AI 而生。

组件库只是 shadcn 的其中一层。而且,如果真到了那一步,它也是可以被替换的。