Create Shadcn Dashboard
A CLI tool to quickly set up a Next.js dashboard with Shadcn UI components and authentication.
Features
- Next.js 14+ with App Router
- Shadcn UI components
- Authentication setup with NextAuth.js
- Dashboard layout with sidebar and header
- Responsive design
- Zod schema validation, TailwindCSS styling, Pre-commit hooks via Husky, Prettier
- TypeScript support
- Boilerplate code from https://github.com/Kiranism/next-shadcn-dashboard-starter
Getting Started
To create a new dashboard project, run:
npx create-shadcn-dashboard my-app
To add a new page, run:
npx create-shadcn-dashboard my-app
To add a new API route, run:
npx create-shadcn-dashboard add route 
This also supports advanced route names such as "npx create-shadcn-dashboard add route users/[id]/info" or other Nextjs route patterns.
Running your app
cd my-app
npm run dev
Photo gallery
Photo Gallery (Click to expand)
| Description | Image |
|---|---|
| Login screen (Dark mode) |  |
| Dashboard (Dark mode) |  |
| Login screen (Light mode) |  |
| Dashboard (Light mode) |  |
Notes
Notes (Click to expand)
- When starting your dashboard, you may find that the auth system lets you login with any set of emails or passwords, and that is because by default the auth.config.ts file doesnt check for anything.
- You can add your own providers to the auth.config.ts file and that will be used to check for valid logins.