{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install reka-ui"],"cli":null},"imports":["import { RekaButton } from 'reka-ui'","import { RekaDialogRoot, RekaDialogTrigger, RekaDialogContent } from 'reka-ui'","import type { TimeRange } from 'reka-ui'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}