Library reka-ui Vue 无障碍 Headless UI 组件库

用 Vue 写复杂交互组件（弹窗、下拉、日期选择器）时，最麻烦的不是样式，而是键盘导航、焦点管理和 ARIA 属性这些无障碍细节。自己实现容易漏掉大量边界情况，导致组件对屏幕阅读器不友好。
reka-ui（前身是社区知名的 Radix Vue）提供一套无样式（headless）的可访问组件原语。你只管写标记和样式，它负责所有交互行为与无障碍逻辑，让你在 Vue 里也能享受 Radix 级别的组件质量。

项目基本信息

一、项目介绍

reka-ui（An open-source UI component library for building high-quality, accessible design systems and web apps for Vue. Previously Radix Vue），Vue 无障碍 Headless UI 组件库。它把相关能力封装成开箱即用的形态，让开发者无需从零搭建即可直接落地，下文从优势、场景到安装使用逐一展开。

二、核心优势

• 无样式设计，标记与样式完全由你控制
• 内置键盘交互、焦点管理、ARIA 属性，符合 WAI-ARIA 规范
• 由 Radix Vue 演进而来，社区与文档成熟
• 支持 Vue 3，并提供 Nuxt 等生态适配

三、适用场景

• 需要高度自定义外观但又要无障碍的交互组件
• 基于 Vue 搭建设计系统或组件库
• 对可访问性有合规要求的官网与产品

四、安装教程

使用 npm 安装（包名已从 radix-vue 迁移为 reka-ui）：

npm install reka-ui

或：

pnpm add reka-ui

常见报错：提示找不到 radix-vue 这个旧包。该项目已重命名为 reka-ui，请统一改用新包名，旧文档中的导入路径需相应替换。

五、使用示例

以对话框为例，引入组件后在模板中使用：

<script setup>
import { Dialog } from 'reka-ui';
</script>

<template>
  <Dialog.Root>
    <Dialog.Trigger>打开</Dialog.Trigger>
    <Dialog.Portal>
      <Dialog.Overlay />
      <Dialog.Content>
        <Dialog.Title>标题</Dialog.Title>
        <Dialog.Description>内容</Dialog.Description>
      </Dialog.Content>
    </Dialog.Portal>
  </Dialog.Root>
</template>

输入：在模板里声明 Dialog 的触发与内容结构。
输出：reka-ui 自动接管 Esc 关闭、焦点陷阱、背景遮罩点击关闭以及 ARIA 角色，无需手写任何无障碍逻辑。

六、常见问题

问：reka-ui 和 Element Plus 这类组件库能一起用吗？

答：可以。reka-ui 是 headless 原语，不绑定样式，常作为底层与带样式的组件库互补，或用来自建设计系统。

问：需要自己写 CSS 吗？

答：是的，组件不带视觉样式，这正是它的设计初衷——把外观完全交给你。

七、总结

reka-ui 把 Vue 复杂组件的无障碍交互封装到位，是自建设计系统或追求可访问性的 Vue 团队的优质底座。