Nuxt Shadcn Dashboard

Nuxt Shadcn Dashboard is a free, MIT-licensed dashboard template built on Nuxt 4, Shadcn Vue, and TailwindCSS 4 that gives developers a ready-to-run admin interface with configurable sidebar and theme options. The template is scaffolded through the nuxi CLI, runs on Vercel as a live demo, and is available from the dianprata/nuxt-shadcn-dashboard GitHub repository.

What is Nuxt Shadcn Dashboard?

Nuxt Shadcn Dashboard is a starter project for building admin panels using the Nuxt 4 framework, shadcn-vue component library, and TailwindCSS 4 utility styling. It takes a user through the nuxi init command to generate a new Nuxt project preconfigured with a dashboard layout, sidebar navigation, and theme system, and outputs a working application that can be customized via app.config.ts. The template is open source under the MIT license and has a live demo hosted on Vercel.

Key Features

• Nuxt 4 framework — Built on Nuxt 4, the latest version of the Vue meta-framework, ensuring compatibility with modern Nuxt features.
• Shadcn Vue integration — Uses shadcn-vue components, with official component documentation linked from shadcn-vue.com.
• TailwindCSS 4 styling — Styled with TailwindCSS 4, providing utility-first CSS with no separate CSS files to manage.
• Configurable sidebar — In app.config.ts, set sidebar collapsible mode to offcanvas, icon, or none; side to left or right; and variant to sidebar, floating, or inset.
• Theme customization — Choose from 9 theme colors (default, blue, green, orange, purple, red, teal, yellow, rose) and 3 theme types (default, mono, scaled).
• Quick project scaffolding — Start a new dashboard by running npx nuxi@latest init -t github:dianprata/nuxt-shadcn-dashboard my-dashboard-app and then pnpm i.
• Live demo — Preview the template in action at the Vercel deployment before downloading.
• MIT license — Free to use in personal and commercial projects with no attribution required.

Who is it for?

Developers who need a modern admin dashboard without building the boilerplate from scratch use this template as their starting point. It also serves freelancers and agencies that want to ship client management UIs quickly, and Nuxt developers who want a reference implementation of shadcn-vue and TailwindCSS 4 in a Nuxt 4 project.

What can you do with it?

• Admin dashboard builders: Scaffold a new project with a preconfigured sidebar and theme switcher, then add custom pages, data tables, and charts.
• Frontend developers: Adjust the sidebar collapsible mode, side, and variant plus the theme color and type directly from app.config.ts to match product requirements.
• Open-source contributors: Clone the repository, install with pnpm, run pnpm run dev, and extend the dashboard with new shadcn-vue components.

How does it work?

The template is designed to be bootstrapped via the Nuxt CLI. Run the nuxi init command with the template alias, then install dependencies with pnpm. After any change to app.config.ts app settings, clear the 'app_settings' cookie in your browser to see the new configuration take effect.

Pricing

Nuxt Shadcn Dashboard is free and open source under the MIT license. There are no paid tiers, subscriptions, or hidden costs.

FAQ

Is Nuxt Shadcn Dashboard free?

Yes, the template is released under the MIT license, so it is free to download, modify, and use in both personal and commercial projects.

Which Nuxt version does it use?

The repository metadata and topics list Nuxt 4, and the quick start command uses nuxi (the Nuxt CLI) to scaffold a Nuxt 4 project.

How do I change the theme color?

Edit the appSettings.theme.color property in app.config.ts and pick one of the 9 options: default, blue, green, orange, purple, red, teal, yellow, or rose. After saving, clear the 'app_settings' cookie to apply the change.

How do I start a new project with this template?

Run npx nuxi@latest init -t github:dianprata/nuxt-shadcn-dashboard my-dashboard-app in your terminal, then run pnpm i to install dependencies and pnpm run dev to start the development server.