Studio Admin - Includes multiple dashboards, authentication layouts, customizable theme presets, and more.
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
Note
Looking for the Next.js version? Check out arhamkhnz/next-shadcn-admin-dashboard.
Looking for the Next.js Base UI version? Check out arhamkhnz/next-shadcn-admin-dashboard-baseui.
Looking for the Next.js React Aria version? Check out arhamkhnz/next-shadcn-admin-dashboard-aria.
Tip
I’m also working on Nuxt.js and Svelte versions of this dashboard. They’ll be live soon.
- Built with TanStack Start, React 19, 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:
- Tangerine
- Neo Brutalism
- Soft Pop
You can create more presets by following the same structure as the existing ones.
- Framework: TanStack Start, React 19, TypeScript, Tailwind CSS v4
- UI Components: Shadcn UI
- Validation: Zod
- Forms & State Management: React Hook Form, Zustand
- Tables & Data Handling: TanStack Table
- Tooling & DX: Vite, Nitro, Biome, Husky
- Default Dashboard
- CRM Dashboard
- Finance Dashboard
- Analytics Dashboard
- Productivity Dashboard
- E-commerce Dashboard
- Academy Dashboard
- Logistics Dashboard
- Infrastructure Dashboard
- File Manager
- Patient Monitoring
- Profile
- Email Page
- Chat Page
- Calendar Page
- Kanban Board
- Invoice Page
- Users Management
- Roles Management
- Authentication (4 screens)
- Legacy: Default v1, CRM v1, Finance v1, Analytics v1
- I've added all the planned screens. Feel free to open an issue for requesting something specific.
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 routing structure, see the TanStack Router File-Based Routing documentation.
You can run this project locally, or deploy it instantly with Vercel.
Deploy your own copy with one click.
-
Clone the repository
git clone https://github.com/arhamkhnz/tanstack-shadcn-admin-dashboard.git
-
Navigate into the project
cd tanstack-shadcn-admin-dashboard -
Install dependencies
npm install
-
Start the development server
npm run dev
Your app will be running at http://localhost:3000
Format, lint, and organize imports
npx @biomejs/biome check --writeFor more information on available rules, fixes, and CLI options, refer to the Biome documentation.
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!