# radix-vue/shadcn-vue

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/radix-vue-shadcn-vue).**

10,128 stars · 666 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/radix-vue/shadcn-vue
- Homepage: https://shadcn-vue.com
- awesome-repositories: https://awesome-repositories.com/repository/radix-vue-shadcn-vue.md

## Description

shadcn-vue is a collection of accessible and unstyled UI components for Vue. It serves as a design system foundation and a port of Radix UI primitives to the Vue ecosystem, focusing on providing a base for highly customizable web interfaces.

The project utilizes a template-driven distribution model, delivering raw source code via a CLI rather than a compiled library. This allows for the direct modification of components using Tailwind CSS utility classes to establish a unique visual identity.

The library covers accessible component architecture and custom design system implementation. It provides a set of headless primitives that handle keyboard navigation and screen reader interactions to ensure compatibility with accessibility standards.

## Tags

### User Interface & Experience

- [Radix UI Ports](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/ecosystem-specific-libraries/vue-ui-libraries/radix-ui-ports.md) — Brings the accessibility and behavioral primitives of Radix UI to the Vue ecosystem.
- [Accessible Component Libraries](https://awesome-repositories.com/f/user-interface-experience/accessible-component-libraries.md) — Implements a library optimized for modern accessibility standards and screen reader interactions.
- [Component Composition Primitives](https://awesome-repositories.com/f/user-interface-experience/component-architectures/component-composition/component-composition-primitives.md) — Uses low-level primitives to separate behavioral logic from visual presentation.
- [Vue UI Libraries](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/ecosystem-specific-libraries/vue-ui-libraries.md) — Provides a comprehensive collection of accessible UI components specifically for the Vue ecosystem.
- [Tailwind CSS Integration](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries/tailwind-css-integration.md) — Designed to be styled exclusively with Tailwind CSS utility classes.
- [Design System Foundations](https://awesome-repositories.com/f/user-interface-experience/design-system-foundations.md) — Offers foundational visual primitives and interaction patterns to underpin a customizable design system.
- [Headless UI Libraries](https://awesome-repositories.com/f/user-interface-experience/ui-component-libraries/headless-ui-libraries.md) — Provides a set of headless UI primitives that handle interaction logic and accessibility without predefined styles.
- [Unstyled Tailwind Components](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries/tailwind-component-collections/unstyled-tailwind-components.md) — Provides accessible UI components designed for styling with Tailwind CSS without default styles.
- [Custom UI Components](https://awesome-repositories.com/f/user-interface-experience/custom-ui-components.md) — Offers flexible building blocks for constructing custom, accessible user interfaces. ([source](https://github.com/radix-vue/shadcn-vue#readme))

### Software Engineering & Architecture

- [Design System Implementations](https://awesome-repositories.com/f/software-engineering-architecture/design-system-implementations.md) — Serves as a foundation for implementing a unique visual identity and design system.
- [Composition API Integrations](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/state-management-architectures/reactive-composition-patterns/composition-api-integrations.md) — Implements reactive state and accessibility logic using Vue composables.

### Web Development

- [Accessibility Attribute Mapping](https://awesome-repositories.com/f/web-development/standard-html-attribute-mapping/accessibility-attribute-mapping.md) — Maps internal component states to standard ARIA attributes for screen reader compatibility.
- [UI Component Libraries](https://awesome-repositories.com/f/web-development/ui-component-libraries.md) — Provides a collection of customizable UI elements to build consistent internal libraries. ([source](https://github.com/radix-vue/shadcn-vue#readme))

### Development Tools & Productivity

- [Rapid Prototyping Tools](https://awesome-repositories.com/f/development-tools-productivity/rapid-prototyping-tools.md) — Enables rapid assembly of functional interface mockups using reusable, easily stylable components.
- [CLI Component Templates](https://awesome-repositories.com/f/development-tools-productivity/source-code-distribution/cli-component-templates.md) — Delivers raw source code via a CLI for direct modification instead of a compiled library.

### Part of an Awesome List

- [Component Library Ports](https://awesome-repositories.com/f/awesome-lists/devtools/component-library-ports.md) — Vue.js port of the component library.
- [UI Component Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/ui-component-frameworks.md) — Community-led port of reusable, accessible UI components.