Admin Dashboard Template with Next.js & Shadcn UI

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

View Demo

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
• Language - TypeScript
• Auth - Clerk
• Error tracking - Sentry
• Styling - Tailwind CSS v4
• Components - Shadcn-ui
• Charts - Recharts • Evil Charts
• Schema Validations - Zod
• Data Fetching - TanStack React Query
• State Management - Zustand
• Search params state manager - Nuqs
• Tables - Tanstack Data Tables • Dice table
• Forms - TanStack Form + Zod
• Command+k interface - kbar
• Linter / Formatter - OxLint • Oxfmt
• Pre-commit Hooks - Husky
• Themes - tweakcn

If you are looking for a Tanstack start dashboard template, here is the repo.

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	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	Cards with Recharts graphs for analytics. Parallel routes in the overview sections feature independent loading, error handling, and isolated component rendering.
Product List (Table)	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	TanStack Form + Zod with useMutation for create/update. Cache invalidation on success.
Users (Table)	Users table with React Query + nuqs pattern. Same architecture as Products — server prefetch, client-side pagination/filter via React Query cache.
React Query Demo	Pokemon API showcase demonstrating server prefetch + HydrationBoundary + useSuspenseQuery pattern with client-side cache.
Profile	Clerk's full-featured account management UI that allows users to manage their profile and security settings
Kanban Board	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	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	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	Organization management page using Clerk's <OrganizationList /> component. Users can view, create, and switch between organizations/workspaces.
Team Management	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	Billing management page using Clerk's <PricingTable /> component. Organizations can view available plans, subscribe, and manage subscriptions. Requires an active organization.
Exclusive Page	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	Not Found Page Added in the root level
Global Error	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

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.

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:

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.

Docker

Build the image:

# 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:

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!

Cheers! 🥂

---

Star History