引言

一个开源的 UI 组件库，用于构建高质量、可访问的 设计系统和 Web 应用程序。

Radix Primitives 是一个低层次的 UI 组件库，专注于可访问性、定制化和开发者体验。您可以将这些组件用作设计系统的基础层，或者逐步采用它们。

##愿景

我们大多数人对常见的 UI 模式（如手风琴、复选框、组合框、对话框、下拉菜单、选择框、滑块和工具提示）有类似的定义。这些 UI 模式由 WAI-ARIA 进行文档记录，并被社区普遍理解。

然而，网络平台提供给我们的实现是不够的。它们要么不存在，要么功能不全，或者无法足够定制。

因此，开发者被迫构建自定义组件，这是一项极其困难的任务。结果，网络上的大多数组件都是不可访问的、性能不佳的，并且缺乏重要功能。

我们的目标是创建一个资金充足的开源组件库，供社区使用以构建可访问的设计系统。

主要特点

可访问性

组件在可能的情况下遵循 WAI-ARIA 设计模式。我们处理许多与可访问性相关的复杂实现细节，包括 aria 和 role 属性、焦点管理和键盘导航。了解更多信息，请查看我们的 可访问性 概述。

无样式

组件出厂时没有样式，您可以完全控制外观和感觉。组件可以使用任何样式解决方案进行样式设置。了解更多信息，请查看我们的 样式 指南。

可定制

Radix Primitives 旨在根据您的需求进行定制。我们的开放组件架构为您提供对每个组件部分的细粒度访问，以便您可以包装它们并添加自己的事件监听器、props 或 refs。

非受控

在适用的情况下，组件默认是非受控的，但也可以选择受控。所有的行为连接都会在内部处理，因此您可以尽可能顺利地启动，而无需创建任何本地状态。

开发者体验

我们主要的目标之一是提供最佳的开发者体验。Radix Primitives 提供了一个完全类型化的 API。所有组件共享类似的 API，从而创建一致且可预测的体验。我们还实现了 asChild 属性，使用户可以完全控制渲染的元素。

渐进式采用

我们建议安装 radix-ui 包并导入您所需的原语。这是开始的最简单方法，可以防止版本冲突或重复，并使管理更新变得简单。该包是可树摇的，因此您只需发送所使用的组件。

npm install radix-ui

import { Dialog, DropdownMenu, Tooltip } from "radix-ui";

另外，每个原语也可以单独安装：

npm install @radix-ui/react-dialog
npm install @radix-ui/react-dropdown-menu
npm install @radix-ui/react-tooltip

import * as Dialog from "@radix-ui/react-dialog";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import * as Tooltip from "@radix-ui/react-tooltip";

在单独安装时，我们建议同时更新所有 Radix 包，以防止共享依赖项的重复并保持您的包大小减小。

社区

要参与 Radix 社区，询问问题和分享技巧，加入我们的 Discord。

要接收有关新原语、公告、博客文章和一般 Radix 提示的更新，请关注 Bluesky 或 Twitter。

要报告问题、请求功能和贡献，请查看我们的 GitHub。

• GitHub 仓库
• 行为守则