Radix UI

Radix UI 是一套面向 React 项目的开源 UI 基础组件、图标和颜色工具，核心定位是帮助开发者构建高质量、可访问的界面。它和带完整视觉样式的组件库不同，更偏向“无样式组件底座”：组件负责交互逻辑、键盘操作、ARIA 语义和状态管理，最终外观由项目自己的 CSS、Tailwind 或设计系统决定。

主要功能

Radix UI 提供 Dialog、Dropdown Menu、Popover、Tabs、Tooltip、Select、Switch、Accordion、Slider、Toast 等常见交互组件。这些组件解决的是复杂 UI 行为本身，例如焦点管理、弹层定位、键盘导航、屏幕阅读器语义、打开关闭状态和嵌套交互，而不是预设一套固定视觉风格。

官网当前定位也包含 components、icons 和 colors，说明 Radix 不只是单个组件包，还可以作为设计系统建设的基础资源。对于自研 UI 体系来说，Radix Primitives 可以承载底层交互，设计团队和前端团队再在其上封装按钮、弹窗、菜单、选择器等带品牌样式的业务组件。

适合场景

使用建议

Radix UI 更适合有一定前端工程能力的团队。它不会直接给出完整页面视觉，如果只是想快速搭一个后台，可能不如 Ant Design、Mantine 或 Element Plus 省事。选择 Radix 的前提通常是团队希望拥有自己的视觉规范，并愿意维护组件封装层、主题变量和文档。

落地时建议不要让业务页面直接大量使用 Primitive 组件，而是先封装成项目内部的 Dialog、Select、Dropdown、Tooltip 等统一组件。这样可以集中处理样式、尺寸、错误状态、测试和可访问性细节。升级依赖前也要重点验证弹层、焦点、滚动锁定和键盘操作，避免底层行为变化影响关键流程。

测试体验

从官网公开信息看，Radix UI 的定位非常清晰：提供高质量、可访问的 UI 基础能力。它的优势在底层可靠性和设计自由度，限制是需要团队自己完成视觉和业务封装。对于成熟产品团队，这是优势；对于个人快速项目，则可能显得偏工程化。

访问地址

官网：https://www.radix-ui.com/