skills.rest
onmax
onmaxCOMMUNITY
Explore all skills by this author →
Website𝕏@_onmaxGitHub

reka-ui

Build Vue 3 components with Reka UI headless primitives and WAI-ARIA compliance.

697|35|Updated Dec 11, 2025
Search Tags:#accessibility#frontend#design system#vue#ui components#headless ui#radix vue
One-click install
npx skills add https://github.com/onmax/nuxt-skills --skill reka-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reka-ui
Source: https://github.com/onmax/nuxt-skills/tree/main/skills/reka-ui
Command: npx skills add https://github.com/onmax/nuxt-skills --skill reka-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Developing accessible and robust UI components from scratch is time-consuming and error-prone, often leading to overlooked accessibility standards. Reka UI provides a set of headless (unstyled) Vue components that are WAI-ARIA compliant, saving developers significant effort in building accessible and functional user interfaces.

Core Features & Use Cases

  • Headless Components: Get fully functional, accessible components without any default styling, allowing for complete design freedom and seamless integration with any CSS framework.
  • WAI-ARIA Compliance: Ensure your applications meet accessibility standards out-of-the-box, improving user experience for everyone.
  • Composition (asChild): Seamlessly integrate Reka UI's behavior into your custom elements, merging props and event listeners for flexible component design.
  • Use Case: Implement a complex Dialog or Select component, focusing purely on styling with Tailwind CSS, knowing that the underlying accessibility and interaction logic is handled by Reka UI.

Quick Start

I need to create a basic modal dialog using Reka UI. Provide the Vue template code for a DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, and DialogClose.

Frequently Asked Questions about reka-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build accessible Vue components without default styling?▼

Reka UI provides headless, WAI-ARIA compliant Vue 3 components that are fully functional but unstyled, letting you apply any design system or CSS framework while accessibility and interaction patterns are handled automatically.

Can I use Reka UI components with my existing design system or Tailwind CSS?▼

Yes, Reka UI's headless architecture supports complete design freedom. Compose components with Tailwind CSS, custom CSS, or any framework—the library only provides behavior and accessibility, not styling.

What's the difference between Reka UI and styled component libraries?▼

Reka UI is headless and unstyled, giving you full control over design and allowing integration with any CSS framework. Styled libraries bundle prebuilt designs, trading flexibility for speed and consistency.

How do I merge Reka UI behavior into my custom Vue elements?▼

Use the `asChild` composition pattern to seamlessly apply Reka UI's props and event listeners to your own elements, keeping your custom markup while inheriting accessibility and interaction logic.

Do I need Nuxt to use Reka UI?▼

No, Reka UI works with Vue 3 directly. Nuxt UI and Vite auto-import are optional integration patterns shown in the docs for convenience, but not required.

What accessibility standards does Reka UI follow?▼

Reka UI implements WAI-ARIA compliance out-of-the-box across all components—dialogs, menus, forms, overlays—ensuring keyboard navigation, screen reader support, and semantic markup without additional work.

Related Skills

Explore More Software Engineering Skills→
skaile-aiskaile-ai

prog-expert-scadcn

Configure shadcn-nuxt with components.json registry and Tailwind CSS v4 in Nuxt projects.

Official
Advanced
otto-poblyshotto-poblysh

tailwind-design-system

Convert UI styling into Tailwind CSS v4 design tokens and component variants.

Community
Intermediate
mtsatryanmtsatryan
1

vue-specialist

Guide Vue 3 Composition API practices with TypeScript, Pinia, and Vitest.

Community
Advanced
LuisSambranoLuisSambrano
7

radix-ui

Guide accessible design system development with Radix UI primitives.

Community
Intermediate