Reka UI

Reka UI is an open-source Vue 3 component library providing unstyled, accessible primitive components. Built on WAI-ARIA standards with full keyboard navigation and focus management.

• Reka UI docs
• GitHub

When to use this skill

Use this skill when:

• Building Vue 3 UI components with Reka UI primitives
• Need reference for Reka UI component APIs (props, events, slots)
• Implementing accessible UI patterns (dialogs, menus, selects, etc.)
• Working with date/time components using @internationalized/date
• Composing custom components with asChild prop
• Styling Reka UI components with Tailwind CSS or custom CSS
• Wrapping Reka UI primitives with forwarded props/emits
• Migrating from Radix Vue to Reka UI

Installation

install guide

npm add reka-ui

Nuxt Module

export default defineNuxtConfig({
  modules: ['reka-ui/nuxt'],
})

unplugin-vue-components

import Components from 'unplugin-vue-components/vite'
import RekaResolver from 'reka-ui/resolver'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      dts: true,
      resolvers: [RekaResolver()],
    }),
  ],
})

Date Components Prerequisite

Date and time components require @internationalized/date:

npm add @internationalized/date

Usage Rules

1. Reka UI components are unstyled - you control all styling (CSS, Tailwind, etc.)
2. Import components individually: import { DialogRoot, DialogContent } from 'reka-ui'
3. Components follow a compound pattern: Root > Trigger > Content (with sub-parts)
4. Use v-model for controlled state, defaultValue for uncontrolled
5. Use the asChild prop to compose primitives onto your own elements
6. Stateful components expose data-state attributes for CSS targeting
7. Use forceMount prop when animating with JS animation libraries
8. Wrap app in ConfigProvider for global RTL/locale/scroll settings
9. Use TooltipProvider and ToastProvider at app root level
10. Date components use DateValue objects from @internationalized/date, not native Date

Key Concepts

Composition with asChild

Merge primitive behavior onto your own elements:

<DialogTrigger asChild>
  <MyButton>Open</MyButton>
</DialogTrigger>

Data Attributes for Styling

.AccordionContent[data-state="open"] {
  animation: slideDown 300ms ease-out;
}
.AccordionContent[data-state="closed"] {
  animation: slideUp 300ms ease-out;
}

CSS Variables for Animation

Some components expose sizing CSS variables:

• --reka-accordion-content-width / --reka-accordion-content-height
• --reka-collapsible-content-width / --reka-collapsible-content-height

Controlled vs Uncontrolled

<!-- Uncontrolled -->
<AccordionRoot defaultValue="item-1">

<!-- Controlled -->
<AccordionRoot v-model="activeItem">

Animation with Vue Transition

<DialogContent forceMount>
  <Transition name="fade">
    <div v-if="open">Content</div>
  </Transition>
</DialogContent>

Component Index

Load component docs on-demand from components/ folder.

Form Components

Color Components

Date & Time Components

General Components

Guides Index

Load guide docs on-demand from guides/ folder.

Utilities Index

Load utility docs on-demand from utilities/ folder.

Components

Composables