Back to Vue.js
reka-ui
Vue 3Reka UIheadless componentsaccessibilityWAI-ARIAUI primitivesfrontendNuxt UI
Install this skill
npx skills add onmax/nuxt-skillsWorks across Claude Code, Cursor, Codex, Copilot & Antigravity
Reka UI provides a library of headless Vue 3 components focused on accessibility and WAI-ARIA compliance. Formerly known as Radix Vue, this framework offers unstyled primitives that serve as the foundation for design systems. Developers can control component state through standard Vue props or utilize default behavior for simpler interactions. The library features modular composition, allowing creators to assemble complex widgets like dialogs, menus, and date pickers from granular building blocks such as Roots, Triggers, and Portals. By prioritizing internal logic over visual presentation, Reka UI enables full customization of styles while ensuring keyboard navigation, focus management, and screen reader support remain intact. It functions as the underlying engine for ecosystems like shadcn-vue and Nuxt UI, ensuring that accessible interface patterns remain consistent across modular web applications.
When to Use This Skill
- •Building custom accessible design systems from the ground up
- •Developing complex interactive UI elements like popovers and comboboxes
- •Ensuring keyboard and screen-reader compliance for Vue 3 interfaces
- •Creating reusable, accessible form components for Nuxt applications
How to Invoke This Skill
Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:
- “How do I implement an accessible modal in Vue?
- “Show me how to use Reka UI primitives for a select menu
- “Create a headless dialog component with v-model
- “How to use asChild to customize a component trigger
- “Set up Reka UI auto-imports in a Nuxt project
Pro Tips
- 💡Always consult the `references/components.md` for a quick overview of available primitives before diving into specific component guides.
- 💡Pay close attention to the `asChild` prop for seamless composition and prop forwarding when nesting Reka UI components with your custom elements.
- 💡For advanced scenarios, thoroughly review the 'Controlled State' and 'Virtualization' guides to optimize performance and state management in complex UIs.
What this skill does
- •Headless architecture for full visual customization
- •Strict adherence to WAI-ARIA accessibility standards
- •Flexible state management supporting both controlled and uncontrolled modes
- •Composability through a multi-part component architecture
- •Built-in virtualization support for rendering large data sets
When not to use it
- ✕When a project requires pre-styled, opinionated component libraries
- ✕When working in a non-Vue environment
- ✕When you need a quick UI implementation without CSS customization
Example workflow
- Install the reka-ui package and configure the module in nuxt.config.ts
- Identify the specific primitive needed for your interface element
- Import the relevant parts like Root, Trigger, and Content
- Wrap your custom HTML structure with the component primitives
- Bind state variables using v-model or default props
- Apply global or scoped CSS to achieve the desired visual design
Prerequisites
- –Vue 3
- –Basic knowledge of WAI-ARIA patterns
- –Nuxt 3 (recommended for auto-importing)
Pitfalls & limitations
- !Over-complicating layouts by ignoring the required part-to-root relationships
- !Accidentally stripping necessary accessibility attributes when using custom styling
- !Confusing the difference between controlled and uncontrolled state props
- !Forgetting to import required sub-components in non-Nuxt environments
FAQ
What happened to Radix Vue?
Radix Vue was rebranded to Reka UI to reflect its evolution and independence as a project.
Does Reka UI come with default styles?
No, it is a headless library. It provides zero styling, allowing you to implement your own CSS or utility classes.
Can I use Reka UI without Nuxt?
Yes, it works in standard Vue 3 projects, though you must manually configure imports or use a resolver plugin.
What is the asChild property for?
The asChild property allows you to render the component's functionality onto your own existing element instead of creating a default wrapper tag.
How it compares
Unlike manual implementation which often misses focus trapping or keyboard events, Reka UI abstracts complex browser behavior so you only focus on layout and design.
📄 Full skill instructions — original source: onmax/nuxt-skills
# Reka UI
Unstyled, accessible Vue 3 component primitives. WAI-ARIA compliant. Previously Radix Vue.
**Current version:** v2.7.0 (December 2025)
## 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
## 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.) |
**New guides** (see [reka-ui.com](https://reka-ui.com)): Controlled State, Inject Context, Virtualization, Migration
## 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 |
| ----------------------- | --------------------------------------------------------------------- |
|
| Controlled/Uncontrolled | Use
| Parts | Components split into Root, Trigger, Content, Portal, etc. |
|
| Virtualization | Optimize large lists (Combobox, Listbox, Tree) with virtual scrolling |
| Context Injection | Access component context from child components |
## Installation
## Basic Patterns
## Recent Updates (v2.5.0-v2.7.0)
- **New composables exposed**:
- **Select**: Added
- **Toast**: Added
- **DatePicker**: Added
- **ContextMenu**: Added
- **Virtualization**:
## Resources
- [Reka UI Docs](https://reka-ui.com)
- [GitHub](https://github.com/unovue/reka-ui)
- [Nuxt UI](https://ui.nuxt.com) (styled Reka components)
- [shadcn-vue](https://www.shadcn-vue.com) (styled Reka components)
---
_Token efficiency: ~350 tokens base, components.md index ~100 tokens, per-component ~50-150 tokens_
Unstyled, accessible Vue 3 component primitives. WAI-ARIA compliant. Previously Radix Vue.
**Current version:** v2.7.0 (December 2025)
## 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.) |
**New guides** (see [reka-ui.com](https://reka-ui.com)): Controlled State, Inject Context, Virtualization, Migration
## 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 || Virtualization | Optimize large lists (Combobox, Listbox, Tree) with virtual scrolling |
| Context Injection | Access component context from child components |
## Installation
// 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()] })
]
})## Basic Patterns
<!-- 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>## Recent Updates (v2.5.0-v2.7.0)
- **New composables exposed**:
useLocale, useDirection (v2.6.0)- **Select**: Added
disableOutsidePointerEvents prop to Content- **Toast**: Added
disableSwipe prop for swipe control- **DatePicker**: Added
closeOnSelect property- **ContextMenu**: Added
pressOpenDelay for long-press configuration- **Virtualization**:
estimateSize now accepts function for Listbox/Tree (v2.7.0); supported in Combobox, Listbox, Tree## Resources
- [Reka UI Docs](https://reka-ui.com)
- [GitHub](https://github.com/unovue/reka-ui)
- [Nuxt UI](https://ui.nuxt.com) (styled Reka components)
- [shadcn-vue](https://www.shadcn-vue.com) (styled Reka components)
---
_Token efficiency: ~350 tokens base, components.md index ~100 tokens, per-component ~50-150 tokens_
By Onmax
How to Use This Skill Unit
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/skills/reka-ui/ - Save the file as
SKILL.md - The agent will automatically discover the skill based on its description.
Option B: Global Installation (All Agents)
Save the file to these locations to make it available across all projects:
- Claude Code:
~/.claude/skills/onmax/nuxt-skills/reka-ui/SKILL.md - Cursor:
~/.cursor/skills/onmax/nuxt-skills/reka-ui/SKILL.md - Antigravity:
~/.gemini/antigravity/skills/onmax/nuxt-skills/reka-ui/SKILL.md
🚀 Install with CLI:npx skills add onmax/nuxt-skills
Related Skill Units
vue
Vue.jsVue 3Composition API+5
# Vue 3 Development Reference for Vue 3 Composition API patterns, component architecture, and testing practices. **Current stable:** Vue 3.5+ with enhanced reactivity performance (-56% memory, 10x faster array tracking), new SSR features, and improved developer experience. ## Overview Progressiv...
nuxt
Nuxt.jsVue.jsFrontend Development+5
# Nuxt 4+ Development Progressive guidance for Nuxt 4+ projects with latest patterns and conventions. ## When to Use Working with: - Server routes (API endpoints, server middleware, server utils) - File-based routing (pages, layouts, route groups) - Nuxt middleware (route guards, navigation) - N...
Recommended Rules
View more rules →Vue 3 + TypeScript Composition API Expert
TypeScriptVue 3Composition API
You are an expert in Vue 3 development with TypeScript and Composition API. Key Principles: - Use Composition API with <script setup lang="ts"> - Typ...
Semantic HTML & Accessibility Expert
HTMLAccessibilitySEO
You are an expert in semantic HTML and web accessibility. Key Principles: - Use semantic HTML5 elements - Implement WCAG 2.1 Level AA standards - Ens...
Web Forms & Validation Expert
FormsValidationUX
You are an expert in web forms and form validation. Key Principles: - Implement proper form UX - Use HTML5 validation attributes - Provide clear erro...
Recommended Workflows
View more workflows →Accessibility (a11y) Audit
AccessibilityTestingQuality
--- description: Find and fix accessibility violations --- 1. **Install axe-core**: - Use the CLI tool for quick audits. // turbo - Run `npm...
Automatic commit message generator
GitAIAutomation
--- description: Automatic commit message generator and fast AI-powered commit for all current changes --- // turbo-all This workflow automatically ...
Fix Next.js Hydration Errors
Next.jsDebuggingHydration
--- description: Systematically debug and fix 'Text content does not match server-rendered HTML' errors --- 1. **Check for Invalid HTML Nesting**: ...
