Join our Discord Community
vue icon

Open source and free shadcn templates using Vue

6 templates • 5 contributors • Open source & free

6
Templates
5
Authors

Available Templates (6)

Shadcn Vue template preview
Shadcn Vue
Uby Unovue
Shadcn Vue is an unofficial, community-driven Vue.js port of the popular shadcn/ui component library, bringing the same accessible, customizable, and copy-paste component philosophy to the Vue ecosystem. Developed with the blessing of shadcn/ui's original creator, this open-source project provides Vue developers with beautifully designed components built on Radix Vue primitives and styled with Tailwind CSS, offering the same flexibility and ownership model that made shadcn/ui successful in the React community. The library includes a comprehensive collection of Vue components like buttons, dialogs, dropdowns, forms, and data tables, all designed with accessibility as a priority following WAI-ARIA standards. Unlike traditional Vue component libraries that require npm installations and updates, Shadcn Vue allows developers to copy components directly into their projects, giving them full control to customize, modify, and adapt components to their specific needs without dealing with dependency management. Perfect for Vue 3 applications, Nuxt projects, and any Vue-based web application, this library provides a solid foundation for building modern, consistent design systems while maintaining the composability and reactivity that Vue developers love, making it an ideal choice for teams seeking accessible, production-ready components with complete customization freedom.
Echo Editor template preview
Echo Editor
Sby Seedsa
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 template preview
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 template preview
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.
UI Thing template preview
UI Thing
UI Thing is a modern set of Nuxt components built with Reka UI and TailwindCSS, inspired by shadcn/ui and shadcn-vue, providing a streamlined CLI-driven workflow for rapid UI development. The MIT-licensed library offers quick initialization with one-command setup, easy component addition through CLI commands, theming support, and keyboard shortcut composables for enhanced developer experience. Built with Nuxt, Vue (70.6% of codebase), TypeScript (26.8%), TailwindCSS, and Reka UI, the library focuses on modular component construction with commands like 'npx ui-thing@latest init' for setup and 'npx ui-thing@latest add' for adding components. The project emphasizes developer experience through CLI-driven workflows that make building consistent, customizable UI components effortless. Perfect for Nuxt applications requiring rapid UI development, Vue projects needing accessible components, teams building design systems with Vue, or any project benefiting from shadcn/ui's philosophy adapted for the Vue and Nuxt ecosystem with modern tooling and developer-friendly workflows.
Soybean UI template preview
Soybean UI
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.