Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
onmax avatar

Reka Ui

onmax/nuxt-skills

  • 6.7k installs
  • 696 repo stars
  • Updated July 27, 2026
  • onmax/nuxt-skills

reka-ui is an agent skill for Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and

About

Use when building with Reka UI headless Vue components provides component API accessibility patterns composition asChild controlled uncontrolled state virtualization and styling integration Formerly Radix Vue name reka-ui description Use when building with Reka UI headless Vue components provides component API accessibility patterns composition asChild controlled uncontrolled state virtualization and styling integration license MIT Reka UI Unstyled accessible Vue 3 component primitives Current version v2 8 0 January 2026 When to Use Building headless unstyled components from scratch Need WAI-ARIA compliant components Using Nuxt UI shadcn-vue or other Reka-based libraries Implementing accessible forms dialogs menus popovers For Vue patterns use vue skill Available Guidance File Topics references components md references components md Component index by category Form Date Overlay Menu Data etc components md Per-component details dialog md select md etc Guides see reka-ui com https reka-ui com Styling Animation Composition SSR Namespaced Dates i18n Controlled State Inject Context Virtualization Migration Loading Files Consider loading these reference files based on your task referenc.

  • Building headless/unstyled components from scratch
  • Need WAI-ARIA compliant components
  • Using Nuxt UI, shadcn-vue, or other Reka-based libraries
  • Implementing accessible forms, dialogs, menus, popovers
  • [ ] [references/components.md](references/components.md) - if browsing component index by category or searching for spec

Reka Ui by the numbers

  • 6,739 all-time installs (skills.sh)
  • +40 installs in the week ending Aug 4, 2026 (Skillselion tracking)
  • Ranked #78 of 2,245 Frontend Development skills by installs in the Skillselion catalog
  • Security screen: LOW risk (skills.sh audit)
  • Data as of Aug 4, 2026 (Skillselion catalog sync)
At a glance

reka-ui capabilities & compatibility

Capabilities
building headless/unstyled components from scrat · need wai aria compliant components · using nuxt ui, shadcn vue, or other reka based l · implementing accessible forms, dialogs, menus, p · [ ] [references/components.md](references/compon
Use cases
documentation
From the docs

What reka-ui says it does

license: MIT --- # Reka UI Unstyled, accessible Vue 3 component primitives.
SKILL.md
npx skills add https://github.com/onmax/nuxt-skills --skill reka-ui

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs6.7k
repo stars★ 696
Security audit3 / 3 scanners passed
Last updatedJuly 27, 2026
Repositoryonmax/nuxt-skills ↗

When should developers use reka-ui and what problem does it solve?

Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration

Who is it for?

Developers working with reka-ui patterns described in the skill documentation.

Skip if: Skip when cached docs are empty or the task is outside the skill's documented scope.

When should I use this skill?

Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration

What you get

Grounded guidance and workflows from SKILL.md for reka-ui.

  • accessible Vue component implementations
  • component reference lookups

Files

SKILL.mdMarkdownGitHub ↗

Reka UI

Unstyled, accessible Vue 3 component primitives. WAI-ARIA compliant. Previously Radix Vue.

Current version: v2.8.0 (January 2026)

When to Use

  • Building headless/unstyled components from scratch
  • Need WAI-ARIA compliant components
  • Using Nuxt UI, shadcn-vue, or other Reka-based libraries
  • Implementing accessible forms, dialogs, menus, popovers

For Vue patterns: use vue skill

Available Guidance

FileTopics
[references/components.md](references/components.md)Component index by category (Form, Date, Overlay, Menu, Data, etc.)
*components/\.md**Per-component details (dialog.md, select.md, etc.)

Guides (see reka-ui.com): Styling, Animation, Composition, SSR, Namespaced, Dates, i18n, Controlled State, Inject Context, Virtualization, Migration

Loading Files

Consider loading these reference files based on your task:

  • [ ] references/components.md - if browsing component index by category or searching for specific components

DO NOT load all files at once. Load only what's relevant to your current task.

For styled Nuxt components built on Reka UI: use nuxt-ui skill

Key Concepts

ConceptDescription
asChildRender as child element instead of wrapper, merging props/behavior
Controlled/UncontrolledUse v-model for controlled, default* props for uncontrolled
PartsComponents split into Root, Trigger, Content, Portal, etc.
forceMountKeep element in DOM for animation libraries
VirtualizationOptimize large lists (Combobox, Listbox, Tree) with virtual scrolling
Context InjectionAccess component context from child components

Installation

// nuxt.config.ts (auto-imports all components)
export default defineNuxtConfig({
  modules: ['reka-ui/nuxt']
})
import { RekaResolver } from 'reka-ui/resolver'
// vite.config.ts (with auto-import resolver)
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    vue(),
    Components({ resolvers: [RekaResolver()] })
  ]
})

Basic Patterns

<!-- Dialog with controlled state -->
<script setup>
import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from 'reka-ui'
const open = ref(false)
</script>

<template>
  <DialogRoot v-model:open="open">
    <DialogTrigger>Open</DialogTrigger>
    <DialogPortal>
      <DialogOverlay class="fixed inset-0 bg-black/50" />
      <DialogContent class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded">
        <DialogTitle>Title</DialogTitle>
        <DialogDescription>Description</DialogDescription>
        <DialogClose>Close</DialogClose>
      </DialogContent>
    </DialogPortal>
  </DialogRoot>
</template>
<!-- Select with uncontrolled default -->
<SelectRoot default-value="apple">
  <SelectTrigger>
    <SelectValue placeholder="Pick fruit" />
  </SelectTrigger>
  <SelectPortal>
    <SelectContent>
      <SelectViewport>
        <SelectItem value="apple"><SelectItemText>Apple</SelectItemText></SelectItem>
        <SelectItem value="banana"><SelectItemText>Banana</SelectItemText></SelectItem>
      </SelectViewport>
    </SelectContent>
  </SelectPortal>
</SelectRoot>
<!-- asChild for custom trigger element -->
<DialogTrigger as-child>
  <button class="my-custom-button">Open</button>
</DialogTrigger>

Recent Updates (v2.6.0-v2.8.0)

  • New component: Rating (v2.8.0)
  • ScrollArea: Added "glimpse" scrollbar mode (v2.8.0)
  • PopperContent: Added hideShiftedArrow prop (v2.8.0)
  • TimeField: Added stepSnapping support (v2.8.0)
  • Breaking: weekStartsOn now locale-independent for date components (v2.8.0)
  • Virtualization: estimateSize accepts function for Listbox/Tree (v2.7.0)
  • Composables: useLocale, useDirection exposed (v2.6.0)
  • Select: disableOutsidePointerEvents prop on Content (v2.7.0)
  • Toast: disableSwipe prop (v2.6.0)

Resources

---

_Token efficiency: ~350 tokens base, components.md index ~100 tokens, per-component ~50-150 tokens_

Related skills

vercel-labsVercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kvercel-labsVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6kshadcnShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120kxixu-meDevelop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72leonxlnxMinimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kleonxlnxImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4k

FAQ

What does reka-ui do?

Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration. Formerly Radix Vue

When should I invoke reka-ui?

Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration. Formerly Radix Vue

Where is the source documentation?

Ground claims in SKILL.md excerpts and linked reference files from the cached docs.

Is Reka Ui safe to install?

skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Frontend Developmentfrontend
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.