--- title: "Next.js & shadcn/ui Admin Dashboard" description: "Creative admin dashboard using Next.js App Router and shadcn/ui with a colocation-first structure for simplicity and scalability." url: "https://vercel.com/templates/next.js/next-js-and-shadcn-ui-admin-dashboard" links: repository: "https://github.com/arhamkhnz/next-shadcn-admin-dashboard" demo: "https://next-shadcn-admin-dashboard.vercel.app" deploy: "https://vercel.com/new/clone?demo-title=Next.js+%26+shadcn%2Fui+Admin+Dashboard&demo-description=Creative+admin+dashboard+using+Next.js+App+Router+and+shadcn%2Fui+with+a+colocation-first+structure+for+simplicity+and+scalability.&demo-url=https%3A%2F%2Fnext-shadcn-admin-dashboard.vercel.app&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F5eDnRCUagKuFpFcJDBI7e3%2F13f2230967b5da29546a77943e0b850b%2Fdashboard.png&project-name=Next.js+%26+shadcn%2Fui+Admin+Dashboard&repository-name=next-js-and-shadcn-ui-admin-dashboard&repository-url=https%3A%2F%2Fgithub.com%2Farhamkhnz%2Fnext-shadcn-admin-dashboard&from=templates&skippable-integrations=1" --- # Next.js & shadcn/ui Admin Dashboard Creative admin dashboard using Next.js App Router and shadcn/ui with a colocation-first structure for simplicity and scalability. # Next.js Admin Template with TypeScript & Shadcn UI **Studio Admin** - Includes multiple dashboards, authentication layouts, customizable theme presets, and more. Dashboard Screenshot Most admin templates I found, free or paid, felt cluttered, outdated, or too rigid. I built this as a cleaner alternative with features often missing in others, such as theme toggling and layout controls, while keeping the design modern, minimal, and flexible. > **View demo:** [studio admin](https://studio-admin.arhamkhnz.com) > [!NOTE] > Looking for the Base UI version? Check out [next-shadcn-admin-dashboard-baseui](https://github.com/arhamkhnz/next-shadcn-admin-dashboard-baseui). > > Looking for the React Aria version? Check out [arhamkhnz/next-shadcn-admin-dashboard-aria](https://github.com/arhamkhnz/next-shadcn-admin-dashboard-aria). > > Looking for the TanStack Start version? Check out [tanstack-shadcn-admin-dashboard](https://github.com/arhamkhnz/tanstack-shadcn-admin-dashboard). > [!TIP] > I’m also working on Nuxt.js and Svelte versions of this dashboard. They’ll be live soon. ## Features - Built with Next.js 16, TypeScript, Tailwind CSS v4, and Shadcn UI - Responsive and mobile-friendly - Customizable theme presets (light/dark modes with color schemes like Tangerine, Brutalist, and more) - Flexible layouts (collapsible sidebar, variable content widths) - Authentication flows and screens - Prebuilt dashboards (Default, CRM, Finance, Analytics, Productivity) plus legacy variants - Role-Based Access Control (RBAC) with config-driven UI and multi-tenant support *(planned)* > [!NOTE] > The default dashboard uses the **shadcn neutral** theme. > It also includes additional color presets inspired by [Tweakcn](https://tweakcn.com): > > - Tangerine > - Neo Brutalism > - Soft Pop > > You can create more presets by following the same structure as the existing ones. > Looking for the **Next.js 15** version? > Check out the [`archive/next15`](https://github.com/arhamkhnz/next-shadcn-admin-dashboard/tree/archive/next15) branch. > This branch contains the setup prior to upgrading to Next 16 and the React Compiler. > Looking for the **Next.js 14 + Tailwind CSS v3** version? > Check out the [`archive/next14-tailwindv3`](https://github.com/arhamkhnz/next-shadcn-admin-dashboard/tree/archive/next14-tailwindv3) branch. > It has a different color theme and is not actively maintained, but I try to keep it updated with major changes. ## Tech Stack - **Framework**: Next.js 16 (App Router), TypeScript, Tailwind CSS v4 - **UI Components**: Shadcn UI - **Validation**: Zod - **Forms & State Management**: React Hook Form, Zustand - **Tables & Data Handling**: TanStack Table - **Tooling & DX**: Biome, Husky ## Screens ### Available - Default Dashboard - CRM Dashboard - Finance Dashboard - Analytics Dashboard - Productivity Dashboard - E-commerce Dashboard - Academy Dashboard - Logistics Dashboard - Infrastructure Dashboard - File Manager - Patient Monitoring - Chat Page - Email Page - Profile - Users Management - Roles Management - Kanban Board - Tasks Page - Invoice Page - Calendar Page - Authentication (4 screens) - Legacy: Default v1, CRM v1, Finance v1, Analytics v1 ### Planned I’ve added all the planned screens. Feel free to open an issue for requesting something specific. ## Colocation File System Architecture This project follows a **colocation-based architecture** each feature keeps its own pages, components, and logic inside its route folder. Shared UI, hooks, and configuration live at the top level, making the codebase modular, scalable, and easier to maintain as the app grows. For a full breakdown of the structure with examples, see the [Next Colocation Template](https://github.com/arhamkhnz/next-colocation-template). ## Getting Started You can run this project locally, or deploy it instantly with Vercel. ### Deploy with Vercel [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Farhamkhnz%2Fnext-shadcn-admin-dashboard) _Deploy your own copy with one click._ ### Run locally 1. **Clone the repository** ```bash git clone https://github.com/arhamkhnz/next-shadcn-admin-dashboard.git ``` 2. **Navigate into the project** ```bash cd next-shadcn-admin-dashboard ``` 3. **Install dependencies** ```bash npm install ``` 4. **Start the development server** ```bash npm run dev ``` Your app will be running at [http://localhost:3000](http://localhost:3000) ### Formatting and Linting Format, lint, and organize imports ```bash npx @biomejs/biome check --write ``` > For more information on available rules, fixes, and CLI options, refer to the [Biome documentation](https://biomejs.dev/). --- > [!IMPORTANT] > This project is updated frequently. If you’re working from a fork or an older clone, pull the latest changes before syncing. Some updates may include breaking changes. --- Contributions are welcome. Feel free to open issues, feature requests, or start a discussion. **Happy Vibe Coding!** ## Related Templates ### [Next.js SaaS Starter](https://vercel.com/templates/next.js/next-js-saas-starter) Postgres, Auth, Tailwind, shadcn/ui, and more. ### [Admin Dashboard](https://vercel.com/templates/next.js/admin-dashboard) Get started building your admin dashboard with Vercel's starter, complete with Tailwind CSS, PostgreSQL, and Auth. ### [Modernize Next.js Admin Dashboard Template](https://vercel.com/templates/next.js/modernize-admin-dashboard) Download our modernized admin template for your upcoming web application powered by Next.js, free of charge. --- ## Additional documentation The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.