reka-ui

Reka UI

无样式、可访问的 Vue 3 组件原语。符合 WAI-ARIA 标准。此前名为 Radix Vue。

当前版本： v2.11.0（2026 年 10 月）

适用场景

• 从头构建无头／无样式组件
• 需要符合 WAI-ARIA 标准的组件
• 使用 Nuxt UI、shadcn-vue 或其他基于 Reka 的库
• 实现可访问的表单、对话框、菜单、弹出框

Vue 模式： 使用 vue 技能

可用指南

文件	主题
references/components.md	按类别编排的组件索引（表单、日期、浮层、菜单、数据等）
components/*.md	各组件详情（dialog.md、select.md 等）

指南（参见 reka-ui.com）：样式、动画、组合、SSR、命名空间、日期、i18n、受控状态、注入上下文、虚拟化、迁移

加载文件

请根据任务考虑加载以下参考文件：

• references/components.md - 浏览分类组件索引或搜索特定组件时

请勿一次性加载所有文件。 只加载与当前任务相关的文件。

对于基于 Reka UI 构建的带样式 Nuxt 组件： 使用 nuxt-ui 技能

核心概念

概念	描述
asChild	渲染为子元素而非包装元素，并合并属性／行为
受控／非受控	受控状态使用 v-model，非受控状态使用 default* 属性
部件	组件由 Root、Trigger、Content、Portal 等部分组成
forceMount	将元素保留在 DOM 中，以供动画库使用
虚拟化	使用虚拟滚动优化大型列表（Combobox、Listbox、Tree）
上下文注入	从子组件访问组件上下文

安装

// nuxt.config.ts (auto-imports all components)
export default defineNuxtConfig({
  modules: ['reka-ui/nuxt']
})

import { RekaResolver } from 'reka-ui/resolver'
// vite.config.ts (with auto-import resolver)
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    vue(),
    Components({ resolvers: [RekaResolver()] })
  ]
})

基本模式

<script setup>
import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from 'reka-ui'
const open = ref(false)
</script>

<template>
  <DialogRoot v-model:open="open">
    <DialogTrigger>Open</DialogTrigger>
    <DialogPortal>
      <DialogOverlay class="fixed inset-0 bg-black/50" />
      <DialogContent class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded">
        <DialogTitle>Title</DialogTitle>
        <DialogDescription>Description</DialogDescription>
        <DialogClose>Close</DialogClose>
      </DialogContent>
    </DialogPortal>
  </DialogRoot>
</template>

<SelectRoot default-value="apple">
  <SelectTrigger>
    <SelectValue placeholder="Pick fruit" />
  </SelectTrigger>
  <SelectPortal>
    <SelectContent>
      <SelectViewport>
        <SelectItem value="apple"><SelectItemText>Apple</SelectItemText></SelectItem>
        <SelectItem value="banana"><SelectItemText>Banana</SelectItemText></SelectItem>
      </SelectViewport>
    </SelectContent>
  </SelectPortal>
</SelectRoot>

<DialogTrigger as-child>
  <button class="my-custom-button">Open</button>
</DialogTrigger>

最近更新（v2.6.0-v2.10.5）

• 新增组件：支持滑动手势的 Drawer（v2.10.0）、Autocomplete、TimeRangeField、Color 组件（ColorArea 等）、MonthPicker/YearPicker（v2.9.0）
• DropdownMenu：筛选组件（v2.9.0）
• Checkbox/Switch：自定义 true/false 值（v2.9.0）
• Splitter：像素尺寸和约束（v2.9.0）
• Tooltip：全局内容配置（v2.9.0）
• ConfigProvider：全局传送目标 teleportTo（v2.10.0）
• Dialog：unmountOnHide 属性（v2.10.0）
• HoverCard：enableTouch 属性（v2.10.0）
• Select：nullableValue 属性（v2.10.0）
• Popper：用于 RTL/LTR 的 dir 属性（v2.10.0）
• DateField：stepSnapping（v2.10.0）
• TreeItem：disabled 属性；Tabs：--reka-tabs-indicator-thickness CSS 变量（v2.10.0）
• Rating：已公开并编写文档（v2.10.0）
• 新增组件：Rating（v2.8.0）
• ScrollArea：新增“glimpse”滚动条模式（v2.8.0）
• PopperContent：新增 hideShiftedArrow 属性（v2.8.0）
• TimeField：新增 stepSnapping 支持（v2.8.0）
• 破坏性变更：weekStartsOn 现在与日期组件的区域设置无关（v2.8.0）
• 虚拟化：Listbox/Tree 的 estimateSize 支持函数（v2.7.0）
• 组合式函数：公开 useLocale、useDirection（v2.6.0）
• Select：Content 新增 disableOutsidePointerEvents 属性（v2.7.0）
• Toast：disableSwipe 属性（v2.6.0）

Resources

• Reka UI Docs
• GitHub
• Nuxt UI (styled Reka components)
• shadcn-vue (styled Reka components)

---

Token efficiency: ~350 tokens base, components.md index ~100 tokens, per-component ~50-150 tokens