Next.js Admin Dashboard Starter Template With Shadcn-ui

Built with the Next.js App Router

View Demo

Overview

This is a starter template using the following stack:

• Framework - Next.js (14 | 15)
• Language - TypeScript
• Styling - Tailwind CSS
• Components - Shadcn-ui
• Schema Validations - Zod
• State Management - Zustand
• Search params state manager - Nuqs
• Auth - Auth.js
• Tables - Tanstack Tables
• Forms - React Hook Form
• Command+k interface - kbar
• Linting - ESLint
• Pre-commit Hooks - Husky
• Formatting - Prettier

If you are looking for a React admin dashboard starter, here is the repo.

Pages

Pages	Specifications
Signup	Authentication with NextAuth supports Social logins and email logins (Enter dummy email for demo).
Dashboard	Cards with recharts graphs for analytics.
Product	Tanstack tables with server side searching, filter, pagination by Nuqs which is a Type-safe search params state manager in nextjs
Product/new	A Product Form with shadcn form (react-hook-form + zod).
Profile	Mutistep dynamic forms using react-hook-form and zod for form validation.
Kanban Board	A Drag n Drop task management board with dnd-kit and zustand to persist state locally.
Not Found	Not Found Page Added in the root level
-	-

Feature based organization

src/
├── app/ # Next.js App Router directory
│ ├── (auth)/ # Auth route group
│ │ ├── (signin)/
│ ├── (dashboard)/ # Dashboard route group
│ │ ├── layout.tsx
│ │ ├── loading.tsx
│ │ └── page.tsx
│ └── api/ # API routes
│
├── components/ # Shared components
│ ├── ui/ # UI components (buttons, inputs, etc.)
│ └── layout/ # Layout components (header, sidebar, etc.)
│
├── features/ # Feature-based modules
│ ├── feature/
│ │ ├── components/ # Feature-specific components
│ │ ├── actions/ # Server actions
│ │ ├── schemas/ # Form validation schemas
│ │ └── utils/ # Feature-specific utilities
│ │
├── lib/ # Core utilities and configurations
│ ├── auth/ # Auth configuration
│ ├── db/ # Database utilities
│ └── utils/ # Shared utilities
│
├── hooks/ # Custom hooks
│ └── use-debounce.ts
│
├── stores/ # Zustand stores
│ └── dashboard-store.ts
│
└── types/ # TypeScript types
└── index.ts

Getting Started

Follow these steps to clone the repository and start the development server:

Note

If you want to use the starter with Next 15 with React 19, follow these steps:

• Clone only the next-15 branch:

  git clone --branch next-15 --single-branch https://github.com/Kiranism/next-shadcn-dashboard-starter.git

• Clone the repo:

git clone https://github.com/Kiranism/next-shadcn-dashboard-starter.git

• npm install
• Create a .env.local file by copying the example environment file: cp env.example.txt .env.local
• Add the required environment variables to the .env.local file.
• pnpm run dev

You should now be able to access the application at http://localhost:3000.

Warning

After cloning or forking the repository, be cautious when pulling or syncing with the latest changes, as this may result in breaking conflicts.

Cheers! 🥂