Radix Primitives：一套高可访问性的开源 UI 组件库

文章目录

  • Radix Primitives：一套高可访问性的开源 UI 组件库
    • 为什么选择 Radix Primitives
    • 主要功能
    • 安装使用
    • 社区生态

Radix Primitives：一套高可访问性的开源 UI 组件库

Radix Primitives 是一个开源的 UI 组件库，目前在 GitHub 上获得了 19k+ Star。

Radix Primitives 定位为低层级 UI 组件库，专注于无障碍访问、自定义能力和开发者体验。可以用它作为设计系统的基础层，也可以按需引入其中的部分组件。

为什么选择 Radix Primitives

许多 UI 组件库提供了完整的样式方案，但也意味着你很难摆脱他们的设计风格。Radix Primitives 走的是另一条路：它提供的是无样式组件，把视觉呈现的控制权交给你。

Radix 能嵌入任何设计系统，不论是 Tailwind、CSS Modules 还是 styled-components。

可访问性方面，Radix 组件默认遵循 WAI-ARIA 标准，键盘导航、焦点管理、屏幕阅读器支持都内置好了。

主要功能

Radix Primitives 提供了大量常用 UI 组件：

  • 对话框：支持模态和非模态两种模式，焦点锁定和关闭逻辑均已处理
  • 下拉菜单：支持嵌套、键盘导航、按需渲染
  • 提示工具：自动定位，支持多种触发方式
  • 选择菜单：支持搜索、分组、单选和多选
  • 标签页：支持键盘导航、延迟加载、动态内容
  • 折叠面板：支持手风琴模式，可控制展开状态

每个组件都经过无障碍设计审核，在主流浏览器和屏幕阅读器上测试过。

安装使用

通过 npm 安装组件：

npminstall@radix-ui/react-dialog

然后引入组件：

import * as Dialog from '@radix-ui/react-dialog'; function App() { return ( <Dialog.Root> <Dialog.Trigger>打开对话框</Dialog.Trigger> <Dialog.Portal> <Dialog.Overlay /> <Dialog.Content> <Dialog.Title>标题</Dialog.Title> <Dialog.Description>描述信息</Dialog.Description> <Dialog.Close>关闭</Dialog.Close> </Dialog.Content> </Dialog.Portal> </Dialog.Root> ); }

组件的每个部分都可以独立控制样式，通过asChild属性还可以将默认标签替换为自定义元素。

社区生态

Radix 社区在 Discord 上活跃，多数问题能在社区里找到答案。官方在 Twitter 上发布更新和公告。

项目使用 Chromatic 进行视觉回归测试，每次 UI 变更都会自动截图对比，避免样式意外被改。

Radix Primitives 采用 MIT 许可证，由 WorkOS 维护。

每次 UI 变更都会自动截图对比，避免样式意外被改。

Radix Primitives 采用 MIT 许可证，由 WorkOS 维护。