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 |
- | - |
Follow these steps to clone the repository and start the development server:
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. npm 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! 🥂