Shadcn-vue has recently enhanced its component offerings with several key additions, bringing it closer to parity with established Vue component libraries. Based on the shadcn/ui philosophy from the React ecosystem, shadcn-vue provides a component system rather than a traditional library—components can be used directly or serve as a foundation for custom design systems.
Built on Reka UI as its underlying foundation, shadcn-vue leverages Tailwind CSS and consistently integrates new components from the shadcn ecosystem.
Recent Expansions: Closing the Component Gap
The library has significantly expanded its component coverage with seven new practical components:
- Spinner: Loading indicators for form submissions, async data fetching, and button states
- Kbd: Keyboard shortcut display for documentation, command palettes, and tooltips
- Button Group: Grouping related buttons in toolbars, form actions, and split buttons
- Input Group: Inputs with add-ons for search inputs with icons and inputs with units
- Field: Form field management for complex forms with reactive layouts
- Item: Generic content containers for user lists, notification centers, and cards
- Empty: Empty state handling for no data scenarios, search results, and 404 pages
When compared to comprehensive libraries like Element Plus, shadcn-vue now misses only a limited set of components. The remaining gaps primarily include styling components like Layout Container, Layout, Scrollbar, Space, Typography, Result, and Descriptions, plus functional components such as Color Picker, Color Picker Panel, Rate, Transfer, Tree, and Tree Select. Many of these can be implemented with Tailwind CSS or sourced from complementary libraries.
Complementary Ecosystem
Shadcn-vue integrates effectively with several specialized Vue libraries:
- Inspira UI offers animated components including backgrounds, buttons, and 3D effects
- Vue Bits provides animated components optimized for Vue 3, made by React Bits author.
- Preblocks delivers pre-built blocks based on shadcn-vue
- Stunning UI focuses on animation components including dynamic backgrounds
- Origin UI Vue: Vue port of Origin UI (aka. coss.com origin)
For Vue developers seeking a lightweight, customizable component solution, shadcn-vue presents a compelling option—especially for projects already using Tailwind CSS. The active community continues to contribute components and expand the ecosystem, making shadcn-vue a versatile choice for modern Vue development.
If your team already uses Tailwind CSS and you want modern accessibility, copy-paste freedom, and a vibe-coding workflow, shadcn-vue is no longer “promising”; it’s production-ready today.
