Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
AccordionRoot, AccordionItem
✓ import { AccordionRoot, AccordionItem } from 'radix-vue'
✗ const { AccordionRoot } = require('radix-vue')
Radix Vue components are typically imported as named exports. ESM syntax is standard for modern Vue 3 applications.
Primitive
✓ import { Primitive } from 'radix-vue'
The Primitive component is often used for creating custom component wrappers while inheriting Radix Vue's accessibility and functionality.
DropdownMenu
✓ import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuContent } from 'radix-vue'
Many components come with several sub-components that need to be imported and used together to form a complete pattern.
This quickstart demonstrates a basic single-item collapsible Accordion component, including its root, item, header, trigger, and content, with inline styling for visual reference.
<script setup lang="ts">
import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent } from 'radix-vue';
import { ref } from 'vue';
const accordionValue = ref('item-1');
</script>
<template>
<AccordionRoot
v-model="accordionValue"
class="bg-white rounded-md shadow-[0_2px_10px] shadow-black/5 w-[300px]"
type="single"
:collapsible="true"
>
<AccordionItem
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"
value="item-1"
>
<AccordionHeader class="flex">
<AccordionTrigger
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"
>
Is it accessible?
<svg
class="ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180"
width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"
>
<polygon points="3,1.5 8.5,5 3,8.5" />
</svg>
</AccordionTrigger>
</AccordionHeader>
<AccordionContent
class="text-mauve11 bg-mauve2 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden text-[15px]"
>
<div class="py-[15px] px-5">
Yes. Radix Vue is built on Radix UI's accessible primitives.
</div>
</AccordionContent>
</AccordionItem>
<AccordionItem
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"
value="item-2"
>
<AccordionHeader class="flex">
<AccordionTrigger
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"
>
Is it unstyled?
<svg
class="ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180"
width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"
>
<polygon points="3,1.5 8.5,5 3,8.5" />
</svg>
</AccordionTrigger>
</AccordionHeader>
<AccordionContent
class="text-mauve11 bg-mauve2 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden text-[15px]"
>
<div class="py-[15px] px-5">
Yes. Radix Vue components provide only the logic and accessibility, you provide the styles.
</div>
</AccordionContent>
</AccordionItem>
</AccordionRoot>
</template>
Errors
Common errors & fixes
[Vue warn]: Failed to resolve component: AccordionRoot
The Radix Vue component was used in a Vue template but not correctly imported or registered within the script setup or component options.
fixEnsure you have `import { AccordionRoot } from 'radix-vue';` (or the respective component) in your script block where the component is used. TypeError: Cannot read properties of undefined (reading 'setup') (or similar Vue runtime error mentioning 'vue' context)
This error often indicates that the `vue` peer dependency is missing or an incompatible version is installed, preventing Radix Vue components from initializing correctly.
fixInstall or update Vue to the required version: `npm install vue@latest` or `npm install vue@3` to satisfy the `>= 3.2.0` peer dependency.
Error: 'radix-vue' does not export 'SomeComponent'
Attempting to import a component or utility that is either not exported by the library, misspelled, or only available as a sub-component of a larger primitive.
fixVerify the exact export name and path from the official Radix Vue documentation. For composite components (e.g., `DropdownMenu`), ensure you are importing `DropdownMenuRoot`, `DropdownMenuTrigger`, etc., not just `DropdownMenu`.
Audit
Dependencies
vuerequiredRequired peer dependency for all Radix Vue components to function.