Next.js Admin Dashboard Starter Template With Shadcn-ui

Built with the Next.js 15 App Router

View Demo

## Overview This is a starter template using the following stack: - Framework - [Next.js 15](https://nextjs.org/13) - Language - [TypeScript](https://www.typescriptlang.org) - Auth - [Clerk](https://go.clerk.com/ILdYhn7) - Error tracking - [

](https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy26q2-nextjs&utm_content=github-banner-project-tryfree) - Styling - [Tailwind CSS v4](https://tailwindcss.com) - Components - [Shadcn-ui](https://ui.shadcn.com) - Schema Validations - [Zod](https://zod.dev) - State Management - [Zustand](https://zustand-demo.pmnd.rs) - Search params state manager - [Nuqs](https://nuqs.47ng.com/) - Tables - [Tanstack Data Tables](https://ui.shadcn.com/docs/components/data-table) • [Dice table](https://www.diceui.com/docs/components/data-table) - Forms - [React Hook Form](https://ui.shadcn.com/docs/components/form) - Command+k interface - [kbar](https://kbar.vercel.app/) - Linting - [ESLint](https://eslint.org) - Pre-commit Hooks - [Husky](https://typicode.github.io/husky/) - Formatting - [Prettier](https://prettier.io) _If you are looking for a React admin dashboard starter, here is the [repo](https://github.com/Kiranism/react-shadcn-dashboard-starter)._ ## Pages | Pages | Specifications | | :------------------------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Signup / Signin](https://go.clerk.com/ILdYhn7) | Authentication with **Clerk** provides secure authentication and user management with multiple sign-in options including passwordless authentication, social logins, and enterprise SSO - all designed to enhance security while delivering a seamless user experience. | | [Dashboard (Overview)](https://shadcn-dashboard.kiranism.dev/dashboard) | Cards with Recharts graphs for analytics. Parallel routes in the overview sections feature independent loading, error handling, and isolated component rendering. | | [Product](https://shadcn-dashboard.kiranism.dev/dashboard/product) | Tanstack tables with server side searching, filter, pagination by Nuqs which is a Type-safe search params state manager in nextjs | | [Product/new](https://shadcn-dashboard.kiranism.dev/dashboard/product/new) | A Product Form with shadcn form (react-hook-form + zod). | | [Profile](https://shadcn-dashboard.kiranism.dev/dashboard/profile) | Clerk's full-featured account management UI that allows users to manage their profile and security settings | | [Kanban Board](https://shadcn-dashboard.kiranism.dev/dashboard/kanban) | A Drag n Drop task management board with dnd-kit and zustand to persist state locally. | | [Not Found](https://shadcn-dashboard.kiranism.dev/dashboard/notfound) | Not Found Page Added in the root level | | [Global Error](https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy26q2-nextjs&utm_content=github-banner-project-tryfree) | A centralized error page that captures and displays errors across the application. Integrated with **Sentry** to log errors, provide detailed reports, and enable replay functionality for better debugging. | ## Feature based organization ```plaintext 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 > [!NOTE] > We are using **Next 15** with **React 19**, follow these steps: Clone the repo: ``` git clone https://github.com/Kiranism/next-shadcn-dashboard-starter.git ``` - `pnpm install` ( we have legacy-peer-deps=true added in the .npmrc) - 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` ##### Environment Configuration Setup To configure the environment for this project, refer to the `env.example.txt` file. This file contains the necessary environment variables required for authentication and error tracking. 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! 🥂