# Reka UI — Headless Accessible Vue Component Primitives

> An open-source library of unstyled, accessible component primitives for building high-quality design systems and web applications in Vue.

## Install

Save as a script file and run:

# Reka UI — Headless Accessible Vue Component Primitives

## Quick Use
```bash
npm install reka-ui
# In your component:
import { DialogRoot, DialogTrigger, DialogContent } from 'reka-ui'
<DialogRoot>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>Hello from Reka UI</DialogContent>
</DialogRoot>
```

## Introduction
Reka UI (formerly Radix Vue) provides unstyled, accessible component primitives for Vue applications. It gives you the behavior, accessibility, and keyboard interactions of common UI patterns without imposing any visual design, letting you apply your own styles with full control.

## What Reka UI Does
- Provides 40+ headless component primitives including dialogs, popovers, and menus
- Handles WAI-ARIA attributes, focus management, and keyboard navigation
- Works with any CSS approach including Tailwind, UnoCSS, or plain stylesheets
- Supports Vue 3 with full TypeScript definitions
- Follows the Radix UI component API patterns adapted for the Vue ecosystem

## Architecture Overview
Each Reka UI component is split into composable parts (Root, Trigger, Content, etc.) that you assemble declaratively. The library manages internal state, ARIA roles, and keyboard event handlers, exposing data attributes for styling hooks. No CSS is shipped, so you bring your own styling solution. Under the hood, components use Vue composables for state and Floating UI for positioning dropdowns and tooltips.

## Self-Hosting & Configuration
- Install via npm and import only the components you need
- No CSS to configure; style components using your preferred method
- Use data attributes like `[data-state="open"]` for state-based styling
- Components accept a class or asChild prop for render delegation
- Works with Nuxt via the official `@reka-ui/nuxt` module

## Key Features
- Fully accessible with keyboard navigation and screen reader support baked in
- Unstyled by default for complete visual control
- Composable part-based API for flexible component assembly
- TypeScript-first with strict type definitions
- Growing ecosystem including integrations with shadcn-vue

## Comparison with Similar Tools
- **Radix UI** — The React original that Reka UI is modeled after
- **Headless UI** — Tailwind Labs library, supports Vue but fewer components
- **Ark UI** — Framework-agnostic headless components powered by state machines
- **PrimeVue** — Styled Vue library, not headless
- **Naive UI** — Vue 3 component library, comes with built-in styling

## FAQ
**Q: What is the relationship between Reka UI and Radix Vue?**
A: Reka UI is the renamed and evolved version of Radix Vue. Existing Radix Vue users can migrate to Reka UI following the official guide.

**Q: Can I use Reka UI with Nuxt?**
A: Yes. Install `@reka-ui/nuxt` and add it to your Nuxt modules for auto-imports and optimized SSR.

**Q: How do I style Reka UI components?**
A: Apply styles using CSS classes, Tailwind utilities, or any CSS-in-JS solution. Use data attributes like `data-state` for conditional styling based on component state.

**Q: Does it work with shadcn-vue?**
A: Yes. shadcn-vue is built on top of Reka UI and provides pre-styled component templates you can copy into your project.

## Sources
- https://github.com/unovue/reka-ui
- https://reka-ui.com/

---
Source: https://tokrepo.com/en/workflows/reka-ui-headless-accessible-vue-component-primitives-3493fd75
Author: Script Depot