Reka UI

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

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.