Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kiranism/next-shadcn-dashboard-starter
Admin Dashboard Starter with Nextjs15 and shadcn ui
https://github.com/kiranism/next-shadcn-dashboard-starter
next-auth next-themes nextjs-15-starter nextjs-admin-template nextjs-boilerplate nextjs-example nextjs-template nextjs15 nuqs react-hook-form shadcn-admin shadcn-ui shadcn-ui-starter tanstack-table tremor-ui typescript zod
Last synced: 4 days 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 (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-15T19:11:03.000Z (18 days ago)
- Last Synced: 2025-01-30T01:51:19.600Z (4 days ago)
- Topics: next-auth, next-themes, nextjs-15-starter, nextjs-admin-template, nextjs-boilerplate, nextjs-example, nextjs-template, nextjs15, nuqs, react-hook-form, shadcn-admin, shadcn-ui, shadcn-ui-starter, tanstack-table, tremor-ui, typescript, zod
- Language: TypeScript
- Homepage: https://dub.sh/shadcn-dashboard
- Size: 520 KB
- Stars: 3,534
- Watchers: 29
- Forks: 791
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
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](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 - [Auth.js](https://authjs.dev/)
- Tables - [Tanstack Tables](https://ui.shadcn.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](https://next-shadcn-dashboard-starter.vercel.app/) | Authentication with **NextAuth** supports Social logins and email logins (Enter dummy email for demo). |
| [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) | Mutistep dynamic forms using react-hook-form and zod for form validation. |
| [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! 🥂