test-commit
This commit is contained in:
269
README.md
Normal file
269
README.md
Normal file
@@ -0,0 +1,269 @@
|
|||||||
|
<h1 align="center">Admin Dashboard Template with Next.js & Shadcn UI</h1>
|
||||||
|
|
||||||
|
<div align="center">Open source admin dashboard starter built with Next.js 16, shadcn/ui, Tailwind CSS, TypeScript</div>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<a href="https://dub.sh/shadcn-dashboard"><strong>View Demo</strong></a>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<div align="center">
|
||||||
|
<img src="/public/shadcn-dashboard.png" alt="Shadcn Dashboard Cover" style="max-width: 100%; border-radius: 8px;" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://github.com/Kiranism/next-shadcn-dashboard-starter/stargazers"><img src="https://img.shields.io/github/stars/Kiranism/next-shadcn-dashboard-starter?style=social" alt="GitHub stars" /></a>
|
||||||
|
<a href="https://github.com/Kiranism/next-shadcn-dashboard-starter/network/members"><img src="https://img.shields.io/github/forks/Kiranism/next-shadcn-dashboard-starter?style=social" alt="Forks" /></a>
|
||||||
|
<a href="https://github.com/Kiranism/next-shadcn-dashboard-starter/blob/main/LICENSE"><img src="https://img.shields.io/github/license/Kiranism/next-shadcn-dashboard-starter" alt="MIT License" /></a>
|
||||||
|
<img src="https://img.shields.io/badge/Next.js-16-black" alt="Next.js" />
|
||||||
|
<a href="https://go.clerk.com/ILdYhn7"><img src="https://img.shields.io/badge/Sponsored_by-Clerk-6C47FF?style=flat-square&logo=clerk" alt="Sponsored by Clerk" /></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
This is an **open source admin dashboard starter** built with **Next.js 16, Shadcn UI, TypeScript, and Tailwind CSS**.
|
||||||
|
|
||||||
|
It gives you a production-ready **dashboard UI** with authentication, charts, tables, forms, and a feature-based folder structure, perfect for **SaaS apps, internal tools, and admin panels**.
|
||||||
|
|
||||||
|
### Tech Stack
|
||||||
|
|
||||||
|
This template uses the following stack:
|
||||||
|
|
||||||
|
- Framework - [Next.js 16](https://nextjs.org/16)
|
||||||
|
- Language - [TypeScript](https://www.typescriptlang.org)
|
||||||
|
- Auth - [Clerk](https://go.clerk.com/ILdYhn7)
|
||||||
|
- Error tracking - [Sentry](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)
|
||||||
|
- Charts - [Recharts](https://recharts.org) • [Evil Charts](https://evilcharts.com/)
|
||||||
|
- Schema Validations - [Zod](https://zod.dev)
|
||||||
|
- Data Fetching - [TanStack React Query](https://tanstack.com/query)
|
||||||
|
- 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 - [TanStack Form](https://tanstack.com/form) + [Zod](https://zod.dev)
|
||||||
|
- Command+k interface - [kbar](https://kbar.vercel.app/)
|
||||||
|
- Linter / Formatter - [OxLint](https://oxc.rs/docs/guide/usage/linter) • [Oxfmt](https://oxc.rs/docs/guide/usage/formatter)
|
||||||
|
- Pre-commit Hooks - [Husky](https://typicode.github.io/husky/)
|
||||||
|
- Themes - [tweakcn](https://tweakcn.com/)
|
||||||
|
|
||||||
|
_If you are looking for a Tanstack start dashboard template, here is the [repo](https://git.new/tanstack-start-dashboard)._
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- 🧱 Pre-built **admin dashboard layout** (sidebar, header, content area)
|
||||||
|
|
||||||
|
- 📊 **Analytics overview** page with cards and charts
|
||||||
|
|
||||||
|
- 📋 **Data tables** with React Query prefetch, client-side cache, search, filter & pagination
|
||||||
|
|
||||||
|
- 🔐 **Authentication** & user management via Clerk
|
||||||
|
|
||||||
|
- 🏢 **Multi-tenant workspaces** with Clerk Organizations (create, switch, manage teams)
|
||||||
|
|
||||||
|
- 💳 **Billing & subscriptions** with Clerk Billing for B2B (plan management, feature gating)
|
||||||
|
|
||||||
|
- 🔒 **RBAC navigation system** - Fully client-side navigation filtering based on organization, permissions, and roles
|
||||||
|
|
||||||
|
- ℹ️ **Infobar component** to show helpful tips, status messages, or contextual info on any page
|
||||||
|
|
||||||
|
- 🧩 **Shadcn UI components** with Tailwind CSS styling
|
||||||
|
|
||||||
|
- 🎨 **Multi-theme support** with 6+ beautiful themes and easy theme switching
|
||||||
|
|
||||||
|
- 🧠 Feature-based folder structure for scalable projects
|
||||||
|
|
||||||
|
- ⚙️ Ready for **SaaS dashboards**, internal tools, and client admin panels
|
||||||
|
|
||||||
|
## Use Cases
|
||||||
|
|
||||||
|
You can use this Next.js + Shadcn UI dashboard starter to build:
|
||||||
|
|
||||||
|
- SaaS admin dashboards
|
||||||
|
|
||||||
|
- Internal tools & operations panels
|
||||||
|
|
||||||
|
- Analytics dashboards
|
||||||
|
|
||||||
|
- Client project admin panels
|
||||||
|
|
||||||
|
- Boilerplate for new Next.js admin UI projects
|
||||||
|
|
||||||
|
## 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 List (Table)](https://shadcn-dashboard.kiranism.dev/dashboard/product) | TanStack Table + React Query (server prefetch + client cache) with nuqs URL state for search, filter, pagination. `shallow: true` keeps interactions client-side. |
|
||||||
|
| [Create Product Form](https://shadcn-dashboard.kiranism.dev/dashboard/product/new) | TanStack Form + Zod with `useMutation` for create/update. Cache invalidation on success. |
|
||||||
|
| [Users (Table)](https://shadcn-dashboard.kiranism.dev/dashboard/users) | Users table with React Query + nuqs pattern. Same architecture as Products — server prefetch, client-side pagination/filter via React Query cache. |
|
||||||
|
| [React Query Demo](https://shadcn-dashboard.kiranism.dev/dashboard/react-query) | Pokemon API showcase demonstrating server prefetch + `HydrationBoundary` + `useSuspenseQuery` pattern with client-side cache. |
|
||||||
|
| [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. Features column sorting, task cards with priority badges, assignees, and due dates. |
|
||||||
|
| [Chat](https://shadcn-dashboard.kiranism.dev/dashboard/chat) | Real-time messaging UI with conversation list, message bubbles, quick replies, file attachments, and auto-reply demo. Multi-panel layout with mobile responsive design. |
|
||||||
|
| [Notifications](https://shadcn-dashboard.kiranism.dev/dashboard/notifications) | Notification center with bell icon badge in header, popover preview, and dedicated full page with tabs (All/Unread/Read). Mark as read, mark all as read actions. |
|
||||||
|
| [Workspaces](https://shadcn-dashboard.kiranism.dev/dashboard/workspaces) | Organization management page using Clerk's `<OrganizationList />` component. Users can view, create, and switch between organizations/workspaces. |
|
||||||
|
| [Team Management](https://shadcn-dashboard.kiranism.dev/dashboard/workspaces/team) | Full-featured team management interface using Clerk's `<OrganizationProfile />` component. Manage members, roles, permissions, security settings, and organization details. Requires an active organization. |
|
||||||
|
| [Billing & Plans](https://shadcn-dashboard.kiranism.dev/dashboard/billing) | Billing management page using Clerk's `<PricingTable />` component. Organizations can view available plans, subscribe, and manage subscriptions. Requires an active organization. |
|
||||||
|
| [Exclusive Page](https://shadcn-dashboard.kiranism.dev/dashboard/exclusive) | Example of plan-based access control using Clerk's `<Protect>` component. This page is only accessible to organizations on the Pro plan, demonstrating feature gating with fallback UI. |
|
||||||
|
| [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 pages (sign-in, sign-up)
|
||||||
|
│ ├── dashboard/ # Dashboard route group
|
||||||
|
│ │ ├── overview/ # Analytics with parallel routes
|
||||||
|
│ │ ├── product/ # Product CRUD pages (React Query)
|
||||||
|
│ │ ├── users/ # Users table (React Query + nuqs)
|
||||||
|
│ │ ├── react-query/ # React Query demo page
|
||||||
|
│ │ ├── kanban/ # Task board page
|
||||||
|
│ │ ├── chat/ # Messaging page
|
||||||
|
│ │ ├── notifications/ # Notifications page
|
||||||
|
│ │ ├── workspaces/ # Org management & teams
|
||||||
|
│ │ ├── billing/ # Billing & plans
|
||||||
|
│ │ ├── profile/ # User profile
|
||||||
|
│ │ └── exclusive/ # Plan-gated page
|
||||||
|
│ └── api/ # API routes
|
||||||
|
│
|
||||||
|
├── components/ # Shared components
|
||||||
|
│ ├── ui/ # UI primitives (buttons, inputs, kanban, etc.)
|
||||||
|
│ ├── layout/ # Layout components (header, sidebar, etc.)
|
||||||
|
│ ├── themes/ # Theme system (selector, mode toggle, config)
|
||||||
|
│ └── kbar/ # Command+K interface
|
||||||
|
│
|
||||||
|
├── features/ # Feature-based modules
|
||||||
|
│ ├── overview/ # Dashboard analytics (charts, cards)
|
||||||
|
│ ├── products/ # Product listing, form, tables (React Query)
|
||||||
|
│ ├── users/ # User management table (React Query)
|
||||||
|
│ ├── react-query-demo/ # React Query demo (Pokemon API)
|
||||||
|
│ ├── kanban/ # Drag-drop task board
|
||||||
|
│ ├── chat/ # Messaging (conversations, bubbles, composer)
|
||||||
|
│ ├── notifications/ # Notification center & store
|
||||||
|
│ ├── auth/ # Auth components
|
||||||
|
│ └── profile/ # Profile form schemas
|
||||||
|
│
|
||||||
|
├── lib/ # Core utilities (query-client, searchparams, etc.)
|
||||||
|
├── hooks/ # Custom hooks
|
||||||
|
├── config/ # Navigation, infobar, data table config
|
||||||
|
├── constants/ # Mock data
|
||||||
|
├── styles/ # Global CSS & theme files
|
||||||
|
│ └── themes/ # Individual theme CSS files
|
||||||
|
└── types/ # TypeScript types
|
||||||
|
```
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
> [!NOTE]
|
||||||
|
> This admin dashboard starter uses **Next.js 16 (App Router)** with **React 19** and **Shadcn UI**. Follow these steps to run it locally:
|
||||||
|
|
||||||
|
Clone the repo:
|
||||||
|
|
||||||
|
```
|
||||||
|
git clone https://github.com/Kiranism/next-shadcn-dashboard-starter.git
|
||||||
|
```
|
||||||
|
|
||||||
|
- `bun 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.
|
||||||
|
- `bun 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.
|
||||||
|
|
||||||
|
##### Clerk Setup
|
||||||
|
|
||||||
|
For detailed instructions on configuring Clerk authentication (including organizations/workspaces/teams), please refer to [clerk_setup.md](./docs/clerk_setup.md).
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Cleanup
|
||||||
|
|
||||||
|
To remove optional features you don't need (auth, kanban, chat, notifications, extra themes, sentry), run the cleanup script:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
node scripts/cleanup.js --interactive # interactive mode
|
||||||
|
node scripts/cleanup.js --list # see available features
|
||||||
|
node scripts/cleanup.js --dry-run chat # preview before removing
|
||||||
|
node scripts/cleanup.js kanban chat # remove specific features
|
||||||
|
```
|
||||||
|
|
||||||
|
Run `node scripts/cleanup.js --help` for all options. Delete `scripts/cleanup.js` when you're done.
|
||||||
|
|
||||||
|
## Deploy
|
||||||
|
|
||||||
|
This project includes production-ready Dockerfiles (`Dockerfile` for Node.js, `Dockerfile.bun` for Bun) using standalone output mode. For all deployment options, see the [Next.js Deployment Documentation](https://nextjs.org/docs/app/getting-started/deploying).
|
||||||
|
|
||||||
|
### Docker
|
||||||
|
|
||||||
|
**Build the image:**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Node.js
|
||||||
|
docker build \
|
||||||
|
--build-arg NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_xxxxx \
|
||||||
|
-t shadcn-dashboard .
|
||||||
|
|
||||||
|
# OR Bun
|
||||||
|
docker build -f Dockerfile.bun \
|
||||||
|
--build-arg NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_xxxxx \
|
||||||
|
-t shadcn-dashboard .
|
||||||
|
```
|
||||||
|
|
||||||
|
**Run the container:**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker run -d -p 3000:3000 \
|
||||||
|
-e NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_xxxxx \
|
||||||
|
-e CLERK_SECRET_KEY=sk_live_xxxxx \
|
||||||
|
--restart unless-stopped \
|
||||||
|
--name shadcn-dashboard \
|
||||||
|
shadcn-dashboard
|
||||||
|
```
|
||||||
|
|
||||||
|
### ⭐ Support
|
||||||
|
|
||||||
|
If you find this template helpful, please consider giving it a star ⭐
|
||||||
|
You can also buy me a coffee if you'd like!
|
||||||
|
|
||||||
|
[](https://buymeacoffee.com/kir4n)
|
||||||
|
|
||||||
|
Cheers! 🥂
|
||||||
|
|
||||||
|
<!--
|
||||||
|
|
||||||
|
SEO keywords:
|
||||||
|
|
||||||
|
open source admin dashboard, nextjs admin dashboard, nextjs dashboard template,
|
||||||
|
|
||||||
|
shadcn ui dashboard, admin dashboard starter, next.js 16, typescript dashboard,
|
||||||
|
|
||||||
|
dashboard ui template, nextjs shadcn admin panel, react admin dashboard,
|
||||||
|
|
||||||
|
tailwind css admin dashboard
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Star History
|
||||||
|
|
||||||
|
<a href="https://www.star-history.com/#Kiranism/next-shadcn-dashboard-starter&type=date&legend=top-left">
|
||||||
|
<picture>
|
||||||
|
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=Kiranism/next-shadcn-dashboard-starter&type=date&theme=dark&legend=top-left" />
|
||||||
|
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=Kiranism/next-shadcn-dashboard-starter&type=date&legend=top-left" />
|
||||||
|
<img alt="Star History Chart" src="https://api.star-history.com/svg?repos=Kiranism/next-shadcn-dashboard-starter&type=date&legend=top-left" />
|
||||||
|
</picture>
|
||||||
|
</a>
|
||||||
Reference in New Issue
Block a user