메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| 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. Formerly Radix Vue. |
| license | MIT |
Unstyled, accessible Vue 3 component primitives. WAI-ARIA compliant. Previously Radix Vue.
Current version: v2.7.0 (December 2025)
For Vue patterns: use vue skill
| File | Topics |
|---|---|
| references/components.md | Component index by category (Form, Date, Overlay, Menu, Data, etc.) |
| components/*.md | Per-component details (dialog.md, select.md, etc.) |
New guides (see reka-ui.com): Controlled State, Inject Context, Virtualization, Migration
Load based on context:
| Concept | Description |
|---|---|
asChild | Render as child element instead of wrapper, merging props/behavior |
| Controlled/Uncontrolled | Use v-model for controlled, default* props for uncontrolled |
| Parts | Components split into Root, Trigger, Content, Portal, etc. |
forceMount | Keep element in DOM for animation libraries |
| Virtualization | Optimize large lists (Combobox, Listbox, Tree) with virtual scrolling |
| Context Injection | Access component context from child components |
// 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()] })]
})
<!-- 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>
useLocale, useDirection (v2.6.0)disableOutsidePointerEvents prop to ContentdisableSwipe prop for swipe controlcloseOnSelect propertypressOpenDelay for long-press configurationestimateSize now accepts function for Listbox/Tree (v2.7.0); supported in Combobox, Listbox, TreeToken efficiency: ~350 tokens base, components.md index ~100 tokens, per-component ~50-150 tokens
Use when working on Nuxt 4+ projects - provides server routes, file-based routing, middleware patterns, Nuxt-specific composables, and configuration with latest docs. Covers h3 v1 helpers (validation, WebSocket, SSE) and nitropack v2 patterns.
Use when building styled UI with @nuxt/ui v4 components (Button, Modal, Form, Table, etc.) - provides ready-to-use components with Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.
Use when authoring TypeScript libraries - covers project setup, package exports, build tooling (tsdown/unbuild), API design patterns, type inference tricks, testing, and release workflows. Patterns extracted from 20+ high-quality ecosystem libraries.
Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance
Automatically generate and post detailed bug reports to GitHub Issues for the active project repository. This skill should be used when documenting bugs discovered during development, creating professionally formatted GitHub Issues with reproduction steps, technical insights, and recommended E2E tests.