Next.js Admin Template with TypeScript & Shadcn UI

Includes multiple dashboards, authentication layouts, customizable theme presets, and more.

The idea behind this dashboard aims to offer an alternative to typical admin templates. Most I came across, paid or free, felt cluttered, outdated, or too rigid in design.

I’ve taken design inspiration from various sources. Feel free to open an issue or reach out for credits.

View demo: studio admin

Tip

I’m also working on Nuxt.js, Svelte, and React (Vite + TanStack Router) versions of this dashboard. They’ll be live soon.

Features

• Built with Next.js 15, TypeScript, and Shadcn UI
• Responsive and mobile-friendly design
• Customizable theme presets (light/dark modes with color schemes like Tangerine, Brutalist, and more)
• Multiple layout options (collapsible sidebar, content width variations)
• Authentication layouts and screens
• Dashboard screens for analytics, reports, and overview
• Prebuilt dashboard screens and reusable UI components
• Includes 5 out of 15 planned screens
• RBAC (Role-Based Access Control) with config-driven UI and multi-tenant support (planned)

Note

The default version of the dashboard uses the shadcn neutral theme.
It also supports multiple color themes inspired by Tweakcn, including:

• Tangerine
• Neo Brutalism
• Soft Pop

You can add more presets by following the same structure as the existing ones.

Looking for the Next.js 14 + Tailwind CSS v3 version? Check out the archive/next14-tailwindv3 branch.
It uses a different color theme and isn’t actively maintained, but I’m trying to keep it updated with the latest changes and screens.

Tech Stack

• Framework: Next.js 15 (App Router), TypeScript, Tailwind CSS v4
• Components: Shadcn UI
• Validation: Zod
• Forms & State: React Hook Form, Zustand
• Data Table: TanStack Table
• Tooling: ESLint, Prettier, Husky

Screens

✅ Available
🚧 Coming Soon

Dashboards

• ✅ Default
• ✅ CRM
• ✅ Finance
• 🚧 Analytics
• 🚧 eCommerce
• 🚧 Academy
• 🚧 Logistics

Pages

• 🚧 Email
• 🚧 Chat
• 🚧 Calendar
• 🚧 Kanban
• 🚧 Invoice
• 🚧 Users
• 🚧 Roles
• ✅ Authentication (4 screens)

Colocation File System Architecture

Pages, components, and logic are grouped by feature. Each route folder contains everything it needs. Shared UI, hooks, and config live at the top level, keeping the codebase modular and scalable as the app grows.

Check out this repo for the full file structure and examples.

Getting Started

You can run this project locally, or deploy it instantly with Vercel.

Deploy with Vercel

Clone and deploy your own copy of this project in one click.

Run locally

1. Clone the repository

   git clone https://github.com/arhamkhnz/next-shadcn-admin-dashboard.git

2. Install dependencies

    npm install

3. Start the development server

   npm run dev

Once running, the app will be available at http://localhost:3000

---

Important

This project is frequently updated. If you’re working from a fork or a previously cloned copy, check for the latest changes before syncing. Some updates may include breaking changes.

---

Feel free to open issues, feature requests, or start a discussion if you'd like to contribute or suggest improvements.

Happy Vibe Coding!

Recent Changes

• Fixed hydration mismatch in Select Library page by rendering deterministic dates (UTC dd/mm/yyyy) to avoid server/client locale differences
• Onboarding: Step 3 now shows pending subdomain activation (within 24 hours) with a status badge and copy-link action
• Select Library
  • Switched to image-only tiles using portrait aspect, zero-gap grid, up to 8 per row; captions (name/type) overlay at bottom-center
• AI Summaries
  • Added /api/ai/summary endpoint using current AI provider; book cover card flips to show generated summary on demand
• Library Dashboard
  • Switched to SSR + real-time data (Convex) for charts and table
  • Added two charts: Borrow Requests and Members (new vs active)
  • Reworked Section Cards to 9 metrics (books, loans, members, requests)
• Enquiries (Reader & Library)
  • Threaded messaging via enquiries + enquiry_messages
  • Reader can ask questions to libraries they've transacted with; library can reply
  • SSR initial load with live updates; message drawer shows thread and allows replies
• Members
  • Library Members page with SSR table and live updates
  • Members stats-by-day used for dashboard chart

File Uploads (Convex Presigned S3)

• Onboarding and Add Book now use a Convex action to presign S3 uploads and PUT directly from the browser.
• Required env (build-time for client, runtime for Convex):
  • Client build: NEXT_PUBLIC_AWS_S3_BOOK_BUCKET_NAME, NEXT_PUBLIC_BOOK_BUCKET, NEXT_PUBLIC_LIBRARY_BUCKET
  • Convex runtime: AWS_REGION, AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY
• S3 CORS (bucket): allow your origins, methods [PUT, GET, HEAD], headers [*], expose [ETag].
• Behavior: if an external cover (Google/ISBNdb) is present it’s uploaded to S3; custom uploads override external covers.

UI

• Explore Books → Details: Long descriptions are truncated to 150 characters with a "View more" dialog for the full text.
• Library Books → Add Book: "Stakable" and "Additional Notes" toggles are on one row; cover upload sits under the cover preview.

Notifications

• Real-time notifications with SSR + Convex live updates
  • Server renders initial notifications via fetchQuery; client hydrates with useQuery
  • Notification bell shows live unread count, wiggles on new items, and routes to /platform/notification
  • Users can open the notifications page to view, follow links, and mark items read or mark all read