Admin Dashboard with TanStack Start & Shadcn UI

Open source admin dashboard starter built with TanStack Start, shadcn/ui, Tailwind CSS, TypeScript

View Demo

Overview

This is an open source admin dashboard starter built with TanStack Start, Shadcn UI, TypeScript, and Tailwind CSS.

It gives you a production-ready dashboard UI with charts, tables, forms, and a feature-based folder structure, perfect for SaaS apps, internal tools, and admin panels.

Tech Stack

If you are looking for a Next.js dashboard template, here is the repo.

Features

• Admin dashboard layout (sidebar, header, content area)

• Analytics overview page with cards and Suspense-based independent loading

• Data tables with React Query route loaders, client-side cache, search, filter & pagination

• Type-safe file-based routing with TanStack Router (auto-generated route tree)

• Server functions via createServerFn() for server-side logic

• 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 10+ beautiful themes and easy theme switching

• Feature-based folder structure for scalable projects

• Kanban board with drag-n-drop (dnd-kit + Zustand)

• Chat interface with conversation list, message bubbles, and auto-reply demo

• Notification center with bell icon badge, popover preview, and full page view

• Command palette (Cmd+K) for quick navigation

• Deploy anywhere — Vercel, Cloudflare, Node.js via Nitro presets

Pages

Feature-based Organization

src/
├── routes/                        # TanStack Router file-based routes
│   ├── __root.tsx                 # Root layout (providers, theme, HTML shell)
│   ├── index.tsx                  # Home (auth redirect)
│   ├── auth/                      # Auth pages (sign-in, sign-up)
│   ├── dashboard.tsx              # Dashboard layout (sidebar, header, KBar)
│   └── dashboard/                 # Dashboard pages
│       ├── overview.tsx           # Analytics with Suspense boundaries
│       ├── product/               # Product CRUD (route loaders + React Query)
│       ├── users.tsx              # Users table (route loaders + React Query)
│       ├── react-query.tsx        # React Query demo page
│       ├── kanban.tsx             # Task board page
│       ├── chat.tsx               # Messaging page
│       ├── notifications.tsx      # Notifications page
│       ├── forms/                 # Form examples
│       └── elements/              # UI showcase
│
├── 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
│   └── forms/                     # Form showcases
│
├── lib/                           # Core utilities (query-client, parsers, etc.)
├── hooks/                         # Custom hooks (use-data-table, use-media-query, etc.)
├── config/                        # Navigation, infobar, data table config
├── constants/                     # Mock data
├── styles/                        # Global CSS & theme files
│   └── themes/                    # Individual theme CSS files (OKLCH)
└── types/                         # TypeScript types

Getting Started

[!NOTE] This admin dashboard starter uses TanStack Start with React 19, Vite 7, and Shadcn UI. Follow these steps to run it locally:

Clone the repo:

git clone https://github.com/Kiranism/tanstack-start-dashboard.git
cd tanstack-start-dashboard

Install dependencies and run:

bun install
cp env.example.txt .env
bun run dev

You should now be able to access the application at http://localhost:3000.

Deploy

Vercel (Recommended)

The project uses Nitro with the vercel preset. Just connect your GitHub repo to Vercel:

• Build Command: bun run build
• Output Directory: leave blank (auto-detected)
• Framework Preset: Other

Other Platforms

Change the Nitro preset in vite.config.ts:

// Cloudflare Pages
nitro({ preset: 'cloudflare-pages' });

// Node.js server
nitro({ preset: 'node-server' });

// Netlify
nitro({ preset: 'netlify' });

Then run locally with:

bun run build
bun run start

Key Differences from Next.js Version

Support

If you find this template helpful, please consider giving it a star!

Cheers!