Soybean UI

Built on top of @soybean-ui/primitives and UnoCSS for styling and theming, this library provides Vue developers with the same level of customization, accessibility, and developer experience that React developers enjoy with shadcn/ui. The library features accessible, unstyled UI primitives built specifically for Vue 3's Composition API, flexible theming system powered by UnoCSS with customizable colors, radius, and dark mode support, automatic component resolution with unplugin-vue-components for streamlined imports, copy-paste component approach giving developers full ownership of their UI code, and comprehensive documentation with interactive examples and usage guides. Installation is straightforward via pnpm add soy-ui with additional UnoCSS configuration for theming, and components can be used directly in Vue templates with full TypeScript support.

Unlike monolithic Vue UI libraries that lock you into specific design decisions and bundle sizes, Soybean UI follows the copy-paste paradigm where developers add components to their codebase and customize them freely without fighting against library constraints. This approach is perfect for Vue developers who want shadcn/ui's flexibility and accessibility patterns, teams building design systems that need full control over component styling and behavior, projects requiring accessible UI components with ARIA support out of the box, applications that benefit from UnoCSS's atomic CSS approach, and developers who prefer owning their UI code rather than depending on external component libraries. The library demonstrates how to build accessible component primitives for Vue 3, implement flexible theming with UnoCSS, create developer-friendly component APIs with the Composition API, and apply shadcn/ui's design principles to the Vue ecosystem.