reka-ui
Reka UI
Unstyled, accessibility-first Vue.js component library. Zero styles, WAI-ARIA compliant, keyboard navigation, and focus management built in.
npm install reka-ui
Core Patterns
Anatomy: Root → Trigger → Portal → Content. Import named parts from reka-ui. Namespaced: import { Dialog } from 'reka-ui/namespaced' → <Dialog.Root>, <Dialog.Trigger>, etc.
Styling: Target data-state, data-side, data-align, data-disabled, data-highlighted. CSS: .Item[data-state="open"] {}. Tailwind: data-[state=open]:border-b-2. Teleported elements (portals) need :deep() in scoped styles.
asChild: Merges behavior onto the child element instead of rendering the default element. Use to render a custom element or compose multiple primitives.
State: Uncontrolled = default-value prop. Controlled = v-model (or :model-value + @update:model-value).
Animation: CSS keyframes on data-state (Reka suspends unmount during exit), Vue <Transition>, or Motion Vue (motion-v) with AnimatePresence.
More from aksuharun/skills
lucide-icons
Use Lucide icons correctly across any framework or environment. Lucide is a tree-shakeable SVG icon library with 1000+ icons. Use this skill when working with Lucide icons in React, Vue, Svelte, Solid, Preact, Angular, Astro, React Native, Vanilla JS, or static/server-side environments. Triggers include installing lucide icons, importing lucide components, customizing icon appearance, using dynamic icons, or using Lucide lab custom icons.
99git-best-practices
Git best practices for commit messages and branch workflow. Use when writing or reviewing commit messages, advising on branching, merging, rebasing, PRs, or keeping a clean linear history.
12readme-creator
Creates high-quality, standardized README.md files for software projects suitable for open-source repositories. Use when asked to create or update a README.
11raison-sdk
Raison JavaScript/TypeScript prompt management SDK. Use when working with the `raison` npm package to render templates or query prompt data.
7