{"id":11931,"library":"reka-ui","title":"Reka UI - Vue Headless Components","description":"Reka UI is a comprehensive Vue 3 port of the popular Radix UI Primitives, offering an unstyled, accessible, and highly customizable set of headless UI components. It empowers developers to build robust web applications with a strong focus on delivering excellent accessibility out-of-the-box and maximum flexibility for custom styling. The library is actively maintained, currently at version 2.9.6, and follows a frequent release cadence with regular bug fixes and feature additions, as seen in the recent v2.9.x patches and v2.9.0 feature release. It provides full TypeScript support, making it an ideal choice for TypeScript-first Vue projects. Its key differentiators include its headless architecture, strict adherence to WAI-ARIA standards, and a rich suite of Vue-specific components adapted from the battle-tested Radix UI primitives.","status":"active","version":"2.9.6","language":"javascript","source_language":"en","source_url":"https://github.com/unovue/reka-ui","tags":["javascript","ui","vue","accessibility","headless","nuxt","primitives","components","radix","typescript"],"install":[{"cmd":"npm install reka-ui","lang":"bash","label":"npm"},{"cmd":"yarn add reka-ui","lang":"bash","label":"yarn"},{"cmd":"pnpm add reka-ui","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency for all Reka UI components.","package":"vue","optional":false}],"imports":[{"note":"Reka UI components are typically named exports, not default exports. Named with 'Reka' prefix to avoid conflicts.","wrong":"import RekaButton from 'reka-ui'","symbol":"RekaButton","correct":"import { RekaButton } from 'reka-ui'"},{"note":"Many complex components are composed of multiple named exports. Ensure all necessary parts are imported, usually with the 'Reka' prefix.","wrong":"import { DialogRoot } from 'reka-ui'","symbol":"RekaDialogRoot","correct":"import { RekaDialogRoot, RekaDialogTrigger, RekaDialogContent } from 'reka-ui'"},{"note":"Specific types are exported for use with TypeScript. The 'type' keyword is recommended for type-only imports.","symbol":"TimeRange","correct":"import type { TimeRange } from 'reka-ui'"}],"quickstart":{"code":"<!-- src/components/MyDialog.vue -->\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { RekaButton, RekaDialogRoot, RekaDialogTrigger, RekaDialogContent, RekaDialogTitle, RekaDialogDescription } from 'reka-ui';\n\nconst isDialogOpen = ref(false);\n</script>\n\n<template>\n  <RekaDialogRoot v-model:open=\"isDialogOpen\">\n    <RekaDialogTrigger as-child>\n      <RekaButton class=\"my-custom-button\">Open Dialog</RekaButton>\n    </RekaDialogTrigger>\n    <Teleport to=\"body\">\n      <RekaDialogContent class=\"my-dialog-content\">\n        <RekaDialogTitle class=\"my-dialog-title\">My Dialog Title</RekaDialogTitle>\n        <RekaDialogDescription class=\"my-dialog-description\">\n          This is an accessible dialog, built with Reka UI primitives.\n          You need to provide your own styling for these headless components.\n        </RekaDialogDescription>\n        <RekaButton @click=\"isDialogOpen = false\" class=\"my-close-button\">Close</RekaButton>\n      </RekaDialogContent>\n    </Teleport>\n  </RekaDialogRoot>\n</template>\n\n<style scoped>\n.my-custom-button {\n  padding: 10px 20px;\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.my-dialog-content {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: white;\n  padding: 20px;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  z-index: 1000;\n  min-width: 300px;\n}\n\n.my-dialog-title {\n  font-size: 1.5em;\n  margin-bottom: 10px;\n}\n\n.my-dialog-description {\n  margin-bottom: 15px;\n}\n\n.my-close-button {\n  background-color: #f44336;\n  color: white;\n  padding: 8px 15px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  float: right;\n}\n</style>","lang":"typescript","description":"Demonstrates the basic usage of a Reka Dialog component, including opening, content, and closing. It highlights the headless nature by showing required custom styling."},"warnings":[{"fix":"Review and update the `weekStartsOn` prop usage in affected date components to ensure it aligns with the new locale-independent behavior. You might need to explicitly set the desired start day of the week.","message":"The `weekStartsOn` prop for DatePicker, DateRangePicker, Calendar, and RangeCalendar components was made locale-independent. If you were relying on its previous behavior that might have been tied to specific locale settings, you will need to adjust your implementation.","severity":"breaking","affected_versions":">=2.8.0"},{"fix":"Ensure you apply custom CSS classes or inline styles to Reka UI components to achieve the desired visual appearance. Refer to the Reka UI documentation for component structure to target elements correctly.","message":"Reka UI components are 'headless' or 'unstyled'. This means they provide functionality and accessibility features, but no visual styling by default. Developers are responsible for providing all styling (CSS, Tailwind, etc.) for the components.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade your project's Vue dependency to version 3.4.0 or newer: `npm install vue@latest` or `pnpm update vue`.","message":"Reka UI has a peer dependency on Vue >= 3.4.0. Using it with older versions of Vue 3 might lead to unexpected behavior, warnings, or runtime errors.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Always consult the Reka UI documentation for the specific component you are using to understand its required structure and the correct sub-components to import and use together.","message":"Many Reka UI components are composed of multiple sub-components (e.g., `RekaDialogRoot`, `RekaDialogTrigger`, `RekaDialogContent`). Incorrectly importing or structuring these sub-components can lead to non-functional or inaccessible UI.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure 'reka-ui' is installed (`npm install reka-ui`) and your `tsconfig.json` includes `\"compilerOptions\": { \"allowSyntheticDefaultImports\": true }` if you're mixing CJS/ESM, though `reka-ui` primarily uses named exports.","cause":"TypeScript compiler cannot locate the type definitions for reka-ui, or the package itself is not installed.","error":"TS2307: Cannot find module 'reka-ui' or its corresponding type declarations."},{"fix":"Verify that you have correctly imported the component using named imports (e.g., `import { RekaButton } from 'reka-ui'`) and that the component name in your template exactly matches the imported name (e.g., `<RekaButton>`).","cause":"The Reka UI component was not correctly imported or registered within the Vue component where it's being used.","error":"Vue warn: Failed to resolve component: RekaButton (or similar component name). If this is a native custom element, ensure it's registered with Vue's compilerOptions."},{"fix":"If you recently updated to Reka UI v2.8.0+, review your usage of `weekStartsOn` to conform to its new locale-independent behavior. Ensure the value provided matches the expected type and range (e.g., 0 for Sunday, 1 for Monday).","cause":"You are using a `weekStartsOn` prop that was changed in Reka UI v2.8.0. The previous type signature or interpretation might be causing a mismatch.","error":"Property 'weekStartsOn' does not exist on type '...' for DatePicker/Calendar components."},{"fix":"Ensure `vue` is installed and meets the `reka-ui` peer dependency requirement (Vue >= 3.4.0). Run `npm install vue@latest` or `pnpm update vue`.","cause":"Your project's `vue` dependency might be missing or an incompatible version with `reka-ui`.","error":"Error: Cannot find module 'vue' or 'vue/dist/vue.runtime.esm-bundler.js'"}],"ecosystem":"npm"}