reka-ui_skill

Overview

This skill provides focused guidance for building with Reka UI: a headless, WAI-ARIA compliant set of Vue 3 primitives (formerly Radix Vue). It explains component APIs, accessibility patterns, composition via asChild, controlled vs uncontrolled state, virtualization, and styling integration. Use it to implement accessible, unstyled components or to power styled libraries like Nuxt UI or shadcn-vue.

How this skill works

The skill inspects Reka UI primitives and documentation to surface per-component APIs (Root, Trigger, Content, Portal, parts) and recommended patterns such as v-model controlled state versus default* uncontrolled props. It highlights composition helpers (asChild), context injection, forceMount usage, and virtualization options for large lists. Installation and auto-import patterns for Nuxt and Vite are included to speed integration into Vue/Nuxt projects.

When to use it

• Building headless or unstyled Vue 3 components that must be accessible
• Implementing dialogs, menus, selects, popovers, lists, or date pickers with WAI-ARIA patterns
• Integrating Reka-based styled libraries (Nuxt UI, shadcn-vue) or migrating from Radix Vue
• Optimizing large lists (Combobox, Listbox, Tree) with virtualization
• Needing fine-grained control over mounting, composition, and context injection

Best practices

• Prefer v-model for controlled components and default* props for simple uncontrolled usage
• Use asChild to pass behavior to custom trigger elements while retaining accessibility
• Split UI into Parts (Root, Trigger, Content, Portal) to keep markup predictable and testable
• Enable forceMount during animations to avoid mount/unmount layout shifts
• Use virtualization (estimateSize, function support) for large list performance and combine with keyboard navigation patterns

Example use cases

• Controlled Dialog pattern with DialogRoot v-model:open and separate Portal/Overlay/Content for accessibility and focus management
• Uncontrolled Select using default-value and SelectViewport with virtualized items for long option lists
• Custom trigger button via asChild to attach dialog behavior to bespoke UI without extra wrappers
• Migrating a Radix Vue codebase to Reka UI while preserving accessibility contracts and updating to new composables (useLocale, useDirection)
• Adding swipe or press configuration (Toast disableSwipe, ContextMenu pressOpenDelay) to tailor interaction timing