名称: reka-ui 描述: 使用Reka UI构建时（headless Vue组件） - 提供组件API、无障碍模式、组合（asChild）、受控/非受控状态、虚拟化和样式集成。以前是Radix Vue。许可证: MIT

Reka UI

无样式、可访问的Vue 3组件原语。WAI-ARIA合规。以前是Radix Vue。

当前版本: v2.8.0（2026年1月）

何时使用

从头构建headless/无样式组件
需要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*` 属性进行非受控
部分	组件拆分为根、触发器、内容、门户等。
`forceMount`	为动画库将元素保留在DOM中
虚拟化	通过虚拟滚动优化大型列表（组合框、列表框、树）
上下文注入	从子组件访问组件上下文

安装

// nuxt.config.ts（自动导入所有组件）
export default defineNuxtConfig({
  modules: ['reka-ui/nuxt']
})

import { RekaResolver } from 'reka-ui/resolver'
// vite.config.ts（带自动导入解析器）
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>打开</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>标题</DialogTitle>
        <DialogDescription>描述</DialogDescription>
        <DialogClose>关闭</DialogClose>
      </DialogContent>
    </DialogPortal>
  </DialogRoot>
</template>

<!-- 带非受控默认值的选择框 -->
<SelectRoot default-value="apple">
  <SelectTrigger>
    <SelectValue placeholder="选择水果" />
  </SelectTrigger>
  <SelectPortal>
    <SelectContent>
      <SelectViewport>
        <SelectItem value="apple"><SelectItemText>苹果</SelectItemText></SelectItem>
        <SelectItem value="banana"><SelectItemText>香蕉</SelectItemText></SelectItem>
      </SelectViewport>
    </SelectContent>
  </SelectPortal>
</SelectRoot>

<!-- 使用asChild自定义触发器元素 -->
<DialogTrigger as-child>
  <button class="my-custom-button">打开</button>
</DialogTrigger>

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

新组件: 评分（v2.8.0）
滚动区域: 添加“glimpse”滚动条模式（v2.8.0）
弹窗内容: 添加 hideShiftedArrow 属性（v2.8.0）
时间字段: 添加 stepSnapping 支持（v2.8.0）
重大变更: 日期组件的 weekStartsOn 现在与语言环境无关（v2.8.0）
虚拟化: estimateSize 接受列表框/树的函数（v2.7.0）
组合式函数: useLocale、useDirection 暴露（v2.6.0）
选择框: 内容上添加 disableOutsidePointerEvents 属性（v2.7.0）
Toast: 添加 disableSwipe 属性（v2.6.0）

资源

Reka UI 文档
GitHub
Nuxt UI（样式化Reka组件）
shadcn-vue（样式化Reka组件）

令牌效率: ~350 令牌基础，components.md 索引 ~100 令牌，每个组件 ~50-150 令牌

名称: reka-ui 描述: 使用Reka UI构建时（headless Vue组件） - 提供组件API、无障碍模式、组合（asChild）、受控/非受控状态、虚拟化和样式集成。以前是Radix Vue。 许可证: MIT