Soybean UI

Last updated October 8, 2025

About This Template

Soybean UI (published as soy-ui on npm) is an elegant and accessible UI component library for Vue 3 that brings shadcn/ui's philosophy of copy-paste components and design principles to the Vue ecosystem. 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.

Related Templates

Echo Editor

Echo Editor is a modern AI-powered WYSIWYG rich-text editor for Vue.js built on Tiptap and shadcn-vue, providing comprehensive content editing capabilities with AI assistance for writing, formatting, and content generation. The MIT-licensed editor combines Tiptap's extensible editor framework with shadcn-vue's beautiful component design, delivering a feature-rich editing experience with support for markdown, slash commands, tables, code blocks, and collaborative editing features. Built with Vue 3, Vite for fast development, Tailwind CSS for styling, and SCSS for advanced customization, Echo Editor provides an intuitive WYSIWYG interface that appeals to both technical and non-technical users. The AI-powered features assist with content creation, grammar checking, text improvements, and automated formatting, making it more than just a basic text editor. Perfect for content management systems, blog platforms, documentation sites, note-taking applications, or any Vue.js project requiring sophisticated rich-text editing with AI capabilities, collaborative features, and a modern, customizable interface that matches the shadcn design aesthetic.

Larasonic Vue

Larasonic Vue is the ultimate Laravel starter kit for modern SaaS applications built with the VILT stack (Vue, Inertia, Laravel, Tailwind) and shadcn/ui components, providing a complete foundation for rapid development. The MIT-licensed platform delivers a "10x Dev Experience" with production Docker readiness, advanced authentication, payment integration, API-ready architecture, customizable UI through shadcn components, AI integration capabilities, and FilamentPHP admin panel for backend management. Built with Laravel for robust backend logic, Vue.js for reactive frontend experiences, Inertia.js to bridge frontend and backend seamlessly, Tailwind CSS for modern styling, and shadcn/ui for beautiful components, Larasonic provides an opinionated yet flexible architecture for building sophisticated web applications. The starter kit can be initialized quickly using Laravel's scaffolding command, providing developers with all essential SaaS features configured and ready for customization. Perfect for SaaS platforms requiring Laravel's backend power, modern frontend experiences with Vue, rapid development workflows, or any project benefiting from a comprehensive, production-ready foundation with authentication, payments, and admin tools built in.

Larasonic Vue