The Nuxt 4 Shadcn-vue Starter Template is a GitHub-published boilerplate that pre-configures Nuxt 4 with Tailwind CSS 4, Pinia state management, shadcn-vue UI components, and dark mode, so you can start building Vue applications without wiring up tooling yourself.
What is the Nuxt 4 Shadcn-vue Starter Template?
The Nuxt 4 Shadcn-vue Starter Template is an open-source starter project for building web applications with Nuxt 4, Vue 3, Tailwind CSS 4, and Pinia. It takes a fresh clone and gives you a development server on localhost:3000, a production build in the dist directory (via npm run build), and a static site output (via npm run generate). The template is MIT-licensed and its repository shows 32 stars. It bundles VueUse composables, Radix Icons, and shadcn-vue components (via shadcn-nuxt and radix-vue) so the UI layer is ready to use out of the box.
Key Features
- Dark Mode — Pre-configured with @nuxtjs/color-mode, toggling light and dark themes without extra setup.
- Tailwind CSS 4 integration — Uses @tailwindcss/vite, tailwindcss 4.1.12, tailwindcss-animate, tw-animate-css, and tailwind-merge for utility styling and animation.
- State management with Pinia — Includes @pinia/nuxt and pinia 3.0.3, with a store directory in the project structure for app-wide state.
- Image optimization — @nuxt/image (^1.11.0) handles responsive, optimized images.
- VueUse utilities and composables — @vueuse/core and @vueuse/nuxt (^13.8.0) provide reusable logic.
- Icon components from Radix Icons — @radix-icons/vue (^1.0.0) and lucide-vue-next (^0.542.0) give ready-made icon sets.
- shadcn-vue component library — radix-vue and reka-ui (^2.5.0) power the accessible, unstyled shadcn-nuxt components (^2.2.0).
- Predefined project structure — Components, layouts, pages, plugins, and store directories are already scaffolded.
Who is it for?
- Vue/Nuxt developers starting a new project who want a working Tailwind 4 + Pinia setup without manual configuration.
- UI-focused teams that prefer shadcn-vue's component model and need dark mode support from day one.
- Hobbyists and indie hackers who want a free, MIT-licensed boilerplate to quickly spin up static or server-rendered Nuxt apps.
Use cases
- Rapid prototyping: clone the repo, install dependencies, and iterate on pages immediately because routing, store, styling, and icons are preconfigured.
- Building a content site: use the generate command to output a static dist folder and deploy to any static host.
- Creating an image-heavy portfolio: leverage @nuxt/image for optimized loading and Pinia to manage gallery state.
How does the template work?
Clone or download the repository, run npm install, then npm run dev to start the development server at http://localhost:3000. For production, npm run build outputs code to the dist directory; npm run generate outputs a static site, also in dist.
FAQ
Is the Nuxt 4 Shadcn-vue Starter Template free?
Yes, the project is licensed under the MIT License, so it is free to use, modify, and distribute, including for commercial projects.
What Node/npm commands does it need?
Standard npm commands: npm install, npm run dev, npm run build, and npm run generate.
Which Nuxt version does it use?
The template targets Nuxt 4, with nuxt ^4.0.3 in the installed packages.
Does it include dark mode?
Yes, dark mode is a built-in feature, implemented with @nuxtjs/color-mode and integrated with Tailwind CSS 4.
What UI component library is included?
It includes shadcn-nuxt (^2.2.0), built on radix-vue and reka-ui, plus icon sets from @radix-icons/vue and lucide-vue-next.
