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

| Description | Image | |-------------|-------| | Login screen (Dark mode) | | | Dashboard (Dark mode) | | | Login screen (Light mode) | | | Dashboard (Light mode) | |

Notes

• 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.