1---
2name: reka-ui
3description: 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.
4license: MIT
5---
6 
7# Reka UI
8 
9Unstyled, accessible Vue 3 component primitives. WAI-ARIA compliant. Previously Radix Vue.
10 
11**Current version:** v2.8.0 (January 2026)
12 
13## When to Use
14 
15- Building headless/unstyled components from scratch
16- Need WAI-ARIA compliant components
17- Using Nuxt UI, shadcn-vue, or other Reka-based libraries
18- Implementing accessible forms, dialogs, menus, popovers
19 
20**For Vue patterns:** use `vue` skill
21 
22## Available Guidance
23 
24| File                                                     | Topics                                                              |
25| -------------------------------------------------------- | ------------------------------------------------------------------- |
26| **[references/components.md](references/components.md)** | Component index by category (Form, Date, Overlay, Menu, Data, etc.) |
27| **components/\*.md**                                     | Per-component details (dialog.md, select.md, etc.)                  |
28 
29**Guides** (see [reka-ui.com](https://reka-ui.com)): Styling, Animation, Composition, SSR, Namespaced, Dates, i18n, Controlled State, Inject Context, Virtualization, Migration
30 
31## Loading Files
32 
33**Consider loading these reference files based on your task:**
34 
35- [ ] [references/components.md](references/components.md) - if browsing component index by category or searching for specific components
36 
37**DO NOT load all files at once.** Load only what's relevant to your current task.
38 
39**For styled Nuxt components built on Reka UI:** use **nuxt-ui** skill
40 
41## Key Concepts
42 
43| Concept                 | Description                                                           |
44| ----------------------- | --------------------------------------------------------------------- |
45| `asChild`               | Render as child element instead of wrapper, merging props/behavior    |
46| Controlled/Uncontrolled | Use `v-model` for controlled, `default*` props for uncontrolled       |
47| Parts                   | Components split into Root, Trigger, Content, Portal, etc.            |
48| `forceMount`            | Keep element in DOM for animation libraries                           |
49| Virtualization          | Optimize large lists (Combobox, Listbox, Tree) with virtual scrolling |
50| Context Injection       | Access component context from child components                        |
51 
52## Installation
53 
54```ts
55// nuxt.config.ts (auto-imports all components)
56export default defineNuxtConfig({
57  modules: ['reka-ui/nuxt']
58})
59```
60 
61```ts
62import { RekaResolver } from 'reka-ui/resolver'
63// vite.config.ts (with auto-import resolver)
64import Components from 'unplugin-vue-components/vite'
65 
66export default defineConfig({
67  plugins: [
68    vue(),
69    Components({ resolvers: [RekaResolver()] })
70  ]
71})
72```
73 
74## Basic Patterns
75 
76```vue
77<!-- Dialog with controlled state -->
78<script setup>
79import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from 'reka-ui'
80const open = ref(false)
81</script>
82 
83<template>
84  <DialogRoot v-model:open="open">
85    <DialogTrigger>Open</DialogTrigger>
86    <DialogPortal>
87      <DialogOverlay class="fixed inset-0 bg-black/50" />
88      <DialogContent class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded">
89        <DialogTitle>Title</DialogTitle>
90        <DialogDescription>Description</DialogDescription>
91        <DialogClose>Close</DialogClose>
92      </DialogContent>
93    </DialogPortal>
94  </DialogRoot>
95</template>
96```
97 
98```vue
99<!-- Select with uncontrolled default -->
100<SelectRoot default-value="apple">
101  <SelectTrigger>
102    <SelectValue placeholder="Pick fruit" />
103  </SelectTrigger>
104  <SelectPortal>
105    <SelectContent>
106      <SelectViewport>
107        <SelectItem value="apple"><SelectItemText>Apple</SelectItemText></SelectItem>
108        <SelectItem value="banana"><SelectItemText>Banana</SelectItemText></SelectItem>
109      </SelectViewport>
110    </SelectContent>
111  </SelectPortal>
112</SelectRoot>
113```
114 
115```vue
116<!-- asChild for custom trigger element -->
117<DialogTrigger as-child>
118  <button class="my-custom-button">Open</button>
119</DialogTrigger>
120```
121 
122## Recent Updates (v2.6.0-v2.8.0)
123 
124- **New component**: Rating (v2.8.0)
125- **ScrollArea**: Added "glimpse" scrollbar mode (v2.8.0)
126- **PopperContent**: Added `hideShiftedArrow` prop (v2.8.0)
127- **TimeField**: Added `stepSnapping` support (v2.8.0)
128- **Breaking**: `weekStartsOn` now locale-independent for date components (v2.8.0)
129- **Virtualization**: `estimateSize` accepts function for Listbox/Tree (v2.7.0)
130- **Composables**: `useLocale`, `useDirection` exposed (v2.6.0)
131- **Select**: `disableOutsidePointerEvents` prop on Content (v2.7.0)
132- **Toast**: `disableSwipe` prop (v2.6.0)
133 
134## Resources
135 
136- [Reka UI Docs](https://reka-ui.com)
137- [GitHub](https://github.com/unovue/reka-ui)
138- [Nuxt UI](https://ui.nuxt.com) (styled Reka components)
139- [shadcn-vue](https://www.shadcn-vue.com) (styled Reka components)
140 
141---
142 
143_Token efficiency: ~350 tokens base, components.md index ~100 tokens, per-component ~50-150 tokens_
144