{"library":"radix-vue","title":"Radix Vue Primitives","description":"Radix Vue is an unofficial, community-driven Vue 3 port of the popular Radix UI primitives, providing a comprehensive set of unstyled, accessible UI components for building high-quality design systems. The library focuses on robust, headless component logic, enabling developers to fully control styling via CSS, Tailwind CSS, or other solutions. While the npm registry lists version 1.9.17, the recent release notes indicate active development, with versions up to 2.9.6, suggesting a rapid release cadence primarily focused on bug fixes and new feature additions. Key differentiators include its strong emphasis on web accessibility standards, unopinionated styling, and deep integration with the Vue 3 ecosystem, making it a powerful foundation for custom component libraries.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install radix-vue"],"cli":null},"imports":["import { AccordionRoot, AccordionItem } from 'radix-vue'","import { Primitive } from 'radix-vue'","import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuContent } from 'radix-vue'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"<script setup lang=\"ts\">\nimport { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent } from 'radix-vue';\nimport { ref } from 'vue';\n\nconst accordionValue = ref('item-1');\n</script>\n\n<template>\n  <AccordionRoot\n    v-model=\"accordionValue\"\n    class=\"bg-white rounded-md shadow-[0_2px_10px] shadow-black/5 w-[300px]\"\n    type=\"single\"\n    :collapsible=\"true\"\n  >\n    <AccordionItem\n      class=\"mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b focus-within:relative focus-within:z-10 focus-within:shadow-[0_0_0_2px] focus-within:shadow-black\"\n      value=\"item-1\"\n    >\n      <AccordionHeader class=\"flex\">\n        <AccordionTrigger\n          class=\"text-grass11 shadow-[0_1px_0] shadow-black/0.5 hover:bg-mauve2 flex h-[45px] flex-1 cursor-default items-center justify-between bg-white px-5 text-[15px] leading-none outline-none group\"\n        >\n          Is it accessible?\n          <svg\n            class=\"ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180\"\n            width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\"\n          >\n            <polygon points=\"3,1.5 8.5,5 3,8.5\" />\n          </svg>\n        </AccordionTrigger>\n      </AccordionHeader>\n      <AccordionContent\n        class=\"text-mauve11 bg-mauve2 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden text-[15px]\"\n      >\n        <div class=\"py-[15px] px-5\">\n          Yes. Radix Vue is built on Radix UI's accessible primitives.\n        </div>\n      </AccordionContent>\n    </AccordionItem>\n\n    <AccordionItem\n      class=\"mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b focus-within:relative focus-within:z-10 focus-within:shadow-[0_0_0_2px] focus-within:shadow-black\"\n      value=\"item-2\"\n    >\n      <AccordionHeader class=\"flex\">\n        <AccordionTrigger\n          class=\"text-grass11 shadow-[0_1px_0] shadow-black/0.5 hover:bg-mauve2 flex h-[45px] flex-1 cursor-default items-center justify-between bg-white px-5 text-[15px] leading-none outline-none group\"\n        >\n          Is it unstyled?\n          <svg\n            class=\"ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180\"\n            width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\"\n          >\n            <polygon points=\"3,1.5 8.5,5 3,8.5\" />\n          </svg>\n        </AccordionTrigger>\n      </AccordionHeader>\n      <AccordionContent\n        class=\"text-mauve11 bg-mauve2 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden text-[15px]\"\n      >\n        <div class=\"py-[15px] px-5\">\n          Yes. Radix Vue components provide only the logic and accessibility, you provide the styles.\n        </div>\n      </AccordionContent>\n    </AccordionItem>\n  </AccordionRoot>\n</template>","lang":"typescript","description":"This quickstart demonstrates a basic single-item collapsible Accordion component, including its root, item, header, trigger, and content, with inline styling for visual reference.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}