Radix UI 无头组件库：只管交互与无障碍，外观让你自己画

做组件库最容易被忽略的一点是：把样式和逻辑绑死，改个外观要扒三层。Radix UI 走的是另一条路——它只负责交互行为和无障碍，所有视觉由你画。已经在 shadcn/ui 等大量库中当了多年底层。

它解决什么问题

很多组件库把样式写死，想换一套设计语言就得覆盖一堆类名，越改越乱。

无障碍常被当作附加项，键盘导航、焦点陷阱、屏幕阅读器支持缺一半，自己做要踩很多坑。

核心能力

为什么无头库值得单独存在

无头组件把「交互逻辑」和「长什么样」彻底分开。你的设计系统只写一次样式，换底层组件不丢视觉，重构成本低。

代价是它不帮你起界面：按钮的 hover、弹层的动画都要自己写。适合已经有设计语言、想掌控细节的团队，不适合想立刻拿到完整后台的人。

同类工具怎么选

谁适合用

• 做自有设计系统、要完全掌控组件外观的团队
• 用 shadcn/ui 之类工具、想知道底层是什么的人
• 对无障碍要求高、不想自己重写焦点逻辑的项目

怎么开始

1. 访问 radix-ui.com，看 Primitives 列表挑需要的组件。
2. 通过 npm 安装对应包，如 @radix-ui/react-dialog。
3. 在组件外层套自己的 className 与 CSS 变量写外观。
4. 用官方示例核对键盘与读屏行为是否符合预期。
5. 长期维护请留意项目节奏，新项目可对比 Base UI。

常见问题

Radix 还在维护吗？
已发布版本仍是 MIT 开源可继续用；但团队在 2024 年底至 2025 年初把主要精力转向新项目 Base UI，自身迭代明显放缓。

和 Tailwind 冲突吗？
不冲突。Radix 无样式，正适合配合 Tailwind 这类原子化 CSS 写外观。

Themes 算不算无头？
Themes 是带预设样式的版本，想快速看效果可用，想完全自控则只用 Primitives。

授权与合规

Radix UI 采用 MIT 协议开源免费，可自由用于商业与个人项目，可修改再分发，只需保留版权与授权声明。 官网：www.radix-ui.com。