文章目录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 安装组件npminstallradix-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 维护。