reka-ui

Build accessible headless Vue components with Reka UI primitives.

Updated Jan 6, 2026

Search Tags:#accessibility #a11y #vue #nuxt #ui-components #component-api #headless-ui

Ready to run

npx skills add https://github.com/vito1317/security-one-waf-website --skill reka-ui-vito1317

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: reka-ui
Source: https://github.com/vito1317/security-one-waf-website/tree/main/.tessl/tiles/onmax/nuxt-skills/skills/reka-ui
Command: npx skills add https://github.com/vito1317/security-one-waf-website --skill reka-ui-vito1317

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Unstyled, accessible Vue 3 component primitives that you can compose into complete UI patterns, reducing boilerplate and ensuring consistent accessibility.

Core Features & Use Cases

API-first, headless primitives (Root, Trigger, Content) that you can style from scratch.
Supports composition (asChild), controlled/uncontrolled state, virtualization, and SSR-friendly patterns.
Use with Nuxt UI and other Reka-based libraries to build robust, accessible interfaces.

Quick Start

Import and compose Reka UI primitives in your Vue/Nuxt project to start building accessible components.

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 UI components in Vue without default styles?▼

To build accessible Vue components without default styles, use headless UI primitives. These unstyled components provide the necessary accessibility logic and state management, allowing you to apply your own custom styles from scratch.

Can I use headless Vue components with Nuxt for server-side rendering?▼

Yes, headless Vue components work with Nuxt for server-side rendering. The primitives support SSR-friendly patterns, ensuring your accessible interfaces render correctly on the server before client hydration.

What is the asChild pattern for composing headless UI components?▼

The asChild pattern is a composition API that allows a headless UI component to render its logic and accessibility attributes directly onto a child element. This avoids adding extra DOM nodes while maintaining component behavior and custom styling.

How do I manage state when building accessible Vue components?▼

You can manage state in accessible Vue components using controlled or uncontrolled patterns. The headless primitives support both approaches, allowing the component to handle its internal state or explicitly control it from a parent.

Does headless UI support virtualization for large lists in Vue?▼

Yes, headless UI supports virtualization for handling large lists in Vue. This feature allows you to render only the items visible in the viewport, significantly improving performance for data-heavy accessible interfaces.

Are headless Vue components compatible with Nuxt UI?▼

Yes, headless Vue components are compatible with Nuxt UI. You can use these Reka-based primitives alongside Nuxt UI to build robust, accessible interfaces while maintaining full control over styling and composition.