https://github.com/Kiranism/next-shadcn-dashboard-starter
Admin Dashboard Starter with Nextjs15 and shadcn ui
https://github.com/Kiranism/next-shadcn-dashboard-starter
admin-dashboard admin-panel dashboard nextjs-15-starter nextjs-admin nextjs-admin-template nextjs-boilerplate nextjs-template nextjs15 shadcn-admin shadcn-ui shadcn-ui-starter
Last synced: about 1 year ago
JSON representation
Admin Dashboard Starter with Nextjs15 and shadcn ui
- Host: GitHub
- URL: https://github.com/Kiranism/next-shadcn-dashboard-starter
- Owner: Kiranism
- License: mit
- Created: 2023-11-02T11:54:38.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-25T05:43:13.000Z (over 1 year ago)
- Last Synced: 2025-05-13T20:11:58.365Z (about 1 year ago)
- Topics: admin-dashboard, admin-panel, dashboard, nextjs-15-starter, nextjs-admin, nextjs-admin-template, nextjs-boilerplate, nextjs-template, nextjs15, shadcn-admin, shadcn-ui, shadcn-ui-starter
- Language: TypeScript
- Homepage: https://dub.sh/shadcn-dashboard
- Size: 678 KB
- Stars: 4,366
- Watchers: 39
- Forks: 997
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-github-projects - next-shadcn-dashboard-starter - Free, open source admin dashboard starter built with Next.js 16, shadcn/ui, Tailwind CSS, and TypeScript. โญ6,719 `TypeScript` ๐ฅ (๐ Web Development - Frontend)
- awesome-shadcn-ui - Link - 06-06 | (Boilerplates / Templates)
- Dev-Notes - nextโshadcnโdashboardโstarter
- awesome-shadcn-ui-browser - Link - 06-06 | (Libs and Components)
- cmazxcncn00000dl773xq978n - next-shadcn-dashboard-starter - Admin dashboard starter with Next.js 14 and shadcn/ui. (Boilerplates)
- awesome-shadcn-ui - next-shadcn-dashboard-starter - Next.js 14 ไปช่กจ็๏ผๅซๆฐๆฎๅก็ใ็ญ้็ปไปถ๏ผๆ ทๅผ็ฎๆด็ฐไปฃใ (ไบใ้กน็ฎๆจกๆฟไธ่ๆๆถ / 2. Admin/ไปช่กจ็ๆจกๆฟ)
- awesome-nextjs - Next Shadcn Dashboard Starter - Admin Dashboard Starter with Nextjs14 and shadcn ui (Starter)
- awesome-shadcnui - Github - dashboard) | โ 4545 | (Boilerplates & Starters)
README
Next.js Admin Dashboard Starter Template With Shadcn-ui
Built with the Next.js 15 App Router
## Overview
This is a starter template using the following stack:
- Framework - [Next.js 15](https://nextjs.org/13)
- Language - [TypeScript](https://www.typescriptlang.org)
- 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/)
- Auth - [Clerk](https://go.clerk.com/ILdYhn7)
- Tables - [Tanstack Data Tables](https://ui.shadcn.com/docs/components/data-table) โข [Dice UI](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://next-shadcn-dashboard-starter.vercel.app/auth/sign-up) | 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://next-shadcn-dashboard-starter.vercel.app/dashboard) | Cards with recharts graphs for analytics.Parallel routes in the overview sections with independent loading, error handling, and isolated component rendering . |
| [Product](https://next-shadcn-dashboard-starter.vercel.app/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://next-shadcn-dashboard-starter.vercel.app/dashboard/product/new) | A Product Form with shadcn form (react-hook-form + zod). |
| [Profile](https://next-shadcn-dashboard-starter.vercel.app/dashboard/profile) | Clerk's full-featured account management UI that allows users to manage their profile and security settings |
| [Kanban Board](https://next-shadcn-dashboard-starter.vercel.app/dashboard/kanban) | A Drag n Drop task management board with dnd-kit and zustand to persist state locally. |
| [Not Found](https://next-shadcn-dashboard-starter.vercel.app/dashboard/notfound) | Not Found Page Added in the root level |
| - | - |
## 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`
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! ๐ฅ