Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration. Formerly Radix Vue.
Use the skills CLI to install this skill with one command. Auto-detects all installed AI assistants.
Method 1 - skills CLI
npx skills i onmax/nuxt-skills/skills/reka-uiMethod 2 - openskills (supports sync & update)
npx openskills install onmax/nuxt-skillsAuto-detects Claude Code, Cursor, Codex CLI, Gemini CLI, and more. One install, works everywhere.
Installation Path
Download and extract to one of the following locations:
No setup needed. Let our cloud agents run this skill for you.
Select Provider
Select Model
Best for coding tasks
Environment setup included
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=
<!-- 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)disableSwipe prop (v2.6.0)Token efficiency: ~350 tokens base, components.md index ~100 tokens, per-component ~50-150 tokens