Admin Dashboard Template with Next.js & Shadcn UI

Open source admin dashboard starter built with Next.js 16, shadcn/ui, Tailwind CSS, TypeScript

## 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 `` 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 `` 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 `` 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 `` 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! [![Buy Me A Coffee](https://img.shields.io/badge/Buy%20Me%20A%20Coffee-support-yellow?style=flat-square&logo=buymeacoffee)](https://buymeacoffee.com/kir4n) Cheers! 🥂 --- ## Star History