v1.8.1 · 33 个组件 · MIT

无样式、无障碍的
React 底层组件。

把无障碍行为做进每一个部件：aria 属性、焦点管理、键盘导航都在内部处理。样式完整留给你——组件出厂不带一行 CSS。

开始安装浏览 33 个组件$npm install radix-ui

下面这些部件都是真的，现在就能按

自动更新aria-checked="true"

装一次 radix-ui，import 需要的原语，其余被 tree-shaking 掉。

八个部件，现在就能按。

全部是 radix-ui@1.8.1 真实导出的部件，渲染出的 DOM 自带 role 与 aria 属性。更多组件见组件索引。

Switch

深色模式aria-checked="true"

role="switch" · aria-checked 随状态变化

Slider

aria-valuenow = 38 · 支持方向键

aria-valuenow 随拖动与方向键更新

Checkbox

包含未读邮件标记为重要

aria-checked 双态，键盘空格可切

RadioGroup

紧凑标准宽松

roving focus · 方向键循环

Tabs

焦点管理、键盘导航在内部完成，遵循 WAI-ARIA。

role=tablist · aria-selected 标出当前项

Progress

上传进度64%

aria-valuenow 表达进度语义

Tooltip · Avatar

Tooltip 不能包含可交互元素

ToggleGroup

单选可多选，整组一个 Tab 停靠点

个稳定组件，取自 radix-ui@1.8.1 公开导出

161

个公开部件，每个都可单独样式化

个功能分类，从对话框到状态反馈

WAI-ARIA

遵循 W3C 编写实践，开箱即用

无障碍

遵循 WAI-ARIA 设计模式。role 与 aria-* 属性、焦点锁定与归还、全套键盘导航——这些难做的部分都在内部处理掉了，多数场景直接用。

无样式

组件出厂不带任何样式，渲染真实 DOM 把类名留给你。Tailwind、CSS Modules、CSS-in-JS 都能接，样式与状态通过 data-state 对齐。

开放组合

组件被拆成具名部件，逐个可包裹——加自己的事件、props 或 ref，不需要 fork 源码。asChild 把 props 合并到你自己的元素上。

非受控起步

默认非受控，不写一行 useState 就能跑；需要时加 open 与 onOpenChange 改受控。行为接线全部在内部完成。

按分类速览。

每一格都是包真实导出的名字。

4对话框与浮层 2折叠与展开 3菜单 9表单控件 3导航 3状态反馈 9布局

一个对话框，
八个部件。

把 Root 和具名部件拼起来，语义自然成型。Dialog.Content 渲染出的 DOM 自带role="dialog"、焦点锁定与 Esc 关闭——样式挂在你自己的类名上。

读文档：无障碍

dialog.tsx

import { Dialog } from "radix-ui";

export function Example() {
  return (
    <Dialog.Root>
      <Dialog.Trigger className="btn">打开</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="overlay" />
        <Dialog.Content className="sheet">
          <Dialog.Title>标题</Dialog.Title>
          <Dialog.Description>焦点已锁定</Dialog.Description>
          <Dialog.Close className="btn">关闭</Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

把无障碍装进项目。

推荐装聚合包 radix-ui：只装一次，import 需要的原语，其余组件会被 tree-shaking 掉。

$npm install radix-ui

无样式、无障碍的React 底层组件。