--- name: reka-ui description: Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled\/uncontrolled state, and styling integration. Formerly Radix Vue. license: MIT --- # Reka UI Unstyled, accessible Vue 3 component primitives. WAI-ARIA compliant. Previously Radix Vue. ## When to Use - Building headless\/unstyled components from scratch - Need WAI-ARIA compliant components - Using Nuxt UI, shadcn-vue, or other Reka-based libraries - Implementing accessible forms, dialogs, menus, popovers **For Vue patterns:** use `vue` skill ## Available Guidance | File | Topics | | -------------------------------------------------------- | ------------------------------------------------------------------- | | **[references\/components.md](references\/components.md)** | Component index by category (Form, Date, Overlay, Menu, Data, etc.) | | **components\/\*.md** | Per-component details (dialog.md, select.md, etc.) | ## Usage Pattern **Load based on context:** - Component index → [references\/components.md](references\/components.md) - Specific component → [components\/dialog.md](components\/dialog.md), [components\/select.md](components\/select.md), etc. - For styled Nuxt components built on Reka UI → use **nuxt-ui** skill ## Key Concepts | 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 | ## Installation ```ts \/\/ nuxt.config.ts (auto-imports all components) export default defineNuxtConfig({ modules: ['reka-ui\/nuxt'] }) ``` ```ts 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()] }) ] }) ``` ## Basic Patterns ```vue