commit 0fc112a2e8536711c80eeb4c950f62f925f1e3ad Author: ALLAGROUP\mtpnuniyo Date: Thu Jul 16 09:49:08 2026 +0700 test-commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..3469392 --- /dev/null +++ b/README.md @@ -0,0 +1,269 @@ +

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 +
+
+
+ Shadcn Dashboard Cover +
+ +

+ GitHub stars + Forks + MIT License + Next.js + Sponsored by Clerk +

+ +## 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 + + + + + + Star History Chart + +