reka-ui by onmax/nuxt-skills
npx skills add https://github.com/onmax/nuxt-skills --skill reka-ui无样式、可访问的 Vue 3 组件基元。符合 WAI-ARIA 标准。前身为 Radix Vue。
当前版本: v2.8.0 (2026年1月)
对于 Vue 模式: 使用 vue 技能
| 文件 | 主题 |
|---|---|
| references/components.md | 按类别划分的组件索引 (表单、日期、浮层、菜单、数据等) |
| components/*.md | 每个组件的详细信息 (dialog.md, select.md 等) |
指南 (参见 reka-ui.com): 样式、动画、组合、SSR、命名空间、日期、国际化、受控状态、注入上下文、虚拟化、迁移
根据你的任务考虑加载以下参考文件:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
请勿一次性加载所有文件。 仅加载与你当前任务相关的内容。
对于基于 Reka UI 构建的带样式的 Nuxt 组件: 使用 nuxt-ui 技能
| 概念 | 描述 |
|---|---|
asChild | 渲染为子元素而非包装器,合并属性/行为 |
| 受控/非受控 | 使用 v-model 进行受控,使用 default* 属性进行非受控 |
| 部件 | 组件拆分为 Root、Trigger、Content、Portal 等 |
forceMount | 将元素保留在 DOM 中以便动画库使用 |
| 虚拟化 | 通过虚拟滚动优化大型列表 (Combobox, Listbox, Tree) |
| 上下文注入 | 从子组件访问组件上下文 |
// 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>
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)disableSwipe 属性 (v2.6.0)令牌效率: 基础约 350 令牌,components.md 索引约 100 令牌,每个组件约 50-150 令牌
每周安装量
3.5K
代码仓库
GitHub 星标数
606
首次出现
2026年1月19日
安全审计
安装于
claude-code2.8K
opencode1.7K
gemini-cli1.7K
github-copilot1.7K
codex1.7K
amp1.5K
Unstyled, accessible Vue 3 component primitives. WAI-ARIA compliant. Previously Radix Vue.
Current version: v2.8.0 (January 2026)
For Vue patterns: use vue skill
| File | Topics |
|---|---|
| references/components.md | Component index by category (Form, Date, Overlay, Menu, Data, etc.) |
| components/*.md | Per-component details (dialog.md, select.md, etc.) |
Guides (see reka-ui.com): Styling, Animation, Composition, SSR, Namespaced, Dates, i18n, Controlled State, Inject Context, Virtualization, Migration
Consider loading these reference files based on your task:
DO NOT load all files at once. Load only what's relevant to your current task.
For styled Nuxt components built on Reka UI: use nuxt-ui skill
| Concept | Description |
|---|---|
asChild | Render as child element instead of wrapper, merging props/behavior |
| Controlled/Uncontrolled | Use v-model for controlled, default* props for uncontrolled |
| Parts | Components split into Root, Trigger, Content, Portal, etc. |
forceMount | Keep element in DOM for animation libraries |
| Virtualization | Optimize large lists (Combobox, Listbox, Tree) with virtual scrolling |
| Context Injection | Access component context from child components |
// 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()] })
]
})
<!-- Dialog with controlled state -->
<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>
<!-- Select with uncontrolled default -->
<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>
<!-- asChild for custom trigger element -->
<DialogTrigger as-child>
<button class="my-custom-button">Open</button>
</DialogTrigger>
hideShiftedArrow prop (v2.8.0)stepSnapping support (v2.8.0)weekStartsOn now locale-independent for date components (v2.8.0)estimateSize accepts function for Listbox/Tree (v2.7.0)useLocale, useDirection exposed (v2.6.0)disableOutsidePointerEvents prop on Content (v2.7.0)Token efficiency: ~350 tokens base, components.md index ~100 tokens, per-component ~50-150 tokens
Weekly Installs
3.5K
Repository
GitHub Stars
606
First Seen
Jan 19, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
claude-code2.8K
opencode1.7K
gemini-cli1.7K
github-copilot1.7K
codex1.7K
amp1.5K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
disableSwipe prop (v2.6.0)