{"id":14852,"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.","status":"active","version":"1.9.17","language":"javascript","source_language":"en","source_url":"https://github.com/unovue/radix-vue","tags":["javascript","ui","vue","accessibility","headless","nuxt","primitives","components","radix","typescript"],"install":[{"cmd":"npm install radix-vue","lang":"bash","label":"npm"},{"cmd":"yarn add radix-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add radix-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for all Radix Vue components to function.","package":"vue","optional":false}],"imports":[{"note":"Radix Vue components are typically imported as named exports. ESM syntax is standard for modern Vue 3 applications.","wrong":"const { AccordionRoot } = require('radix-vue')","symbol":"AccordionRoot, AccordionItem","correct":"import { AccordionRoot, AccordionItem } from 'radix-vue'"},{"note":"The Primitive component is often used for creating custom component wrappers while inheriting Radix Vue's accessibility and functionality.","symbol":"Primitive","correct":"import { Primitive } from 'radix-vue'"},{"note":"Many components come with several sub-components that need to be imported and used together to form a complete pattern.","symbol":"DropdownMenu","correct":"import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuContent } from 'radix-vue'"}],"quickstart":{"code":"\n\n","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."},"warnings":[{"fix":"Review and explicitly set the `weekStartsOn` prop for calendar components to ensure correct day-of-week rendering, independent of the current locale settings.","message":"In `v2.8.0`, the `weekStartsOn` prop for `DatePicker`, `DateRangePicker`, `Calendar`, and `RangeCalendar` components was made locale-independent. This change might alter calendar display behavior if your application relied on locale-specific interpretations of this prop previously. You may need to adjust its value to match your desired starting day of the week.","severity":"breaking","affected_versions":">=2.8.0"},{"fix":"Apply custom CSS, utility classes (e.g., Tailwind CSS), or CSS-in-JS solutions to style all Radix Vue components and their sub-components as needed.","message":"Radix Vue components are 'headless' and provide no default styling. Developers are responsible for applying all visual styles (e.g., via CSS, Tailwind CSS, or scoped styles) to make components visually functional and integrated into their design system. Failure to add styling will result in invisible or unstyled, but functionally accessible, elements.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always refer to the official documentation for the expected component structure and prop requirements for each Radix Vue primitive. Ensure all required sub-components are imported and used in the correct hierarchical order.","message":"Correct component composition and nesting are crucial for both functionality and accessibility. Many Radix Vue components require specific parent-child relationships (e.g., `AccordionItem` must be a direct child of `AccordionRoot`). Incorrect nesting can lead to broken UI, accessibility issues, or runtime errors.","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 you have `import { AccordionRoot } from 'radix-vue';` (or the respective component) in your script block where the component is used.","cause":"The Radix Vue component was used in a Vue template but not correctly imported or registered within the script setup or component options.","error":"[Vue warn]: Failed to resolve component: AccordionRoot"},{"fix":"Install or update Vue to the required version: `npm install vue@latest` or `npm install vue@3` to satisfy the `>= 3.2.0` peer dependency.","cause":"This error often indicates that the `vue` peer dependency is missing or an incompatible version is installed, preventing Radix Vue components from initializing correctly.","error":"TypeError: Cannot read properties of undefined (reading 'setup') (or similar Vue runtime error mentioning 'vue' context)"},{"fix":"Verify 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`.","cause":"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.","error":"Error: 'radix-vue' does not export 'SomeComponent'"}],"ecosystem":"npm"}