Next.js 14 Admin Dashboard Starter Template With Shadcn-ui
Built with the Next.js App Router
This is a starter template using the following stack:
- Framework - Next.js 14
- 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 | Specifications |
|---|---|
| Signup | Authentication with NextAuth supports Social logins and email logins (Enter dummy email for demo). |
| Dashboard | Cards with recharts graphs for analytics. |
| Employee | Tanstack tables with server side searching, filter, pagination by Nuqs which is a Type-safe search params state manager in nextjs). |
| Employee/new | A Employee Form with shadcn form (react-hook-form + zod). |
| 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 |
| - | - |
- We use
pnpmpackage manager. Get it here. - Make sure Docker up and running.
- If your Docker account has 2FA enabled, you have to create a Personal Access Token and login before:
- Follow this guide.
- Login with
docker login --username <your-username>
You can either use this template by:
- Click the "Use this template" button and follow the instruction
- Or using the script below:
pnpm dlx tiged sangdth/nextjs-starter your-projectcd your-project
pnpm installFor the first time, you need some default environment variables:
cp .env.example .envThen, run the development server:
pnpm devThen, run the development server:
pnpm devNOTE: The dev server need to be running, because we need Postgres instance.
Sometimes, for example in fresh database situation when you have just started:
pnpm prisma migrate devWe use shadcn-ui in this stack, and create 2 helper scripts for you:
# for adding new component
pnpm ui:add <compnent-name>
# for checking diffs
pnpm ui:diff <component-name>Open http://localhost:3000 with your browser and start developing.