reka-ui

Original：🇺🇸 English

Translated

Use when building accessible Vue.js interfaces with Reka UI (Radix Vue).

1installs

Sourceaksuharun/skills

Added on2026-02-23

NPX Install

npx skill4agent add aksuharun/skills reka-ui

SKILL.md Content

View Translation Comparison →

Reka UI

Unstyled, accessibility-first Vue.js component library. Zero styles, WAI-ARIA compliant, keyboard navigation, and focus management built in.

bash

npm install reka-ui

Core Patterns

Anatomy: Root → Trigger → Portal → Content. Import named parts from

reka-ui

. Namespaced:

import { Dialog } from 'reka-ui/namespaced'

→

<Dialog.Root>

,

<Dialog.Trigger>

, etc.

Styling: Target

data-state

,

data-side

,

data-align

,

data-disabled

,

data-highlighted

. CSS:

.Item[data-state="open"] {}

. Tailwind:

data-[state=open]:border-b-2

. Teleported elements (portals) need

:deep()

in scoped styles.

asChild: Merges behavior onto the child element instead of rendering the default element. Use to render a custom element or compose multiple primitives.

State: Uncontrolled =

default-value

prop. Controlled =

v-model

(or

:model-value

+

@update:model-value

).

Animation: CSS keyframes on

data-state

(Reka suspends unmount during exit), Vue

<Transition>

, or Motion Vue (

motion-v

) with

AnimatePresence

.

Nuxt:

modules: ['reka-ui/nuxt']

— auto-imports all components.

RTL:

<ConfigProvider dir="rtl">

wraps the app.

Dates: Install

@internationalized/date

.

v-model

on calendar/date components accepts

DateValue

objects.

Virtualization:

*Virtualizer

components for large lists. Requires fixed-height parent,

estimateSize

,

textContent

props. Filter items manually before passing.

References

Read only the file relevant to the current task.

references/components-a-l.md — Anatomy, data attributes, CSS variables, and key notes for components Accordion through Listbox.
references/components-m-z.md — Anatomy, data attributes, CSS variables, and key notes for components Menubar through Tree.
references/guides.md — Styling, composition (asChild), animation, controlled state, dates, i18n/RTL, SSR, virtualization, namespaced imports, inject context, migration guide.
references/utilities.md — Primitive, Slot, ConfigProvider, VisuallyHidden, Presence, FocusScope, and composables (useForwardPropsEmits, useFilter, useDateFormatter, etc.).