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

Category	Technology
Framework	TanStack Start
Language	TypeScript
Build Tool	Vite 7
Deployment	Nitro (Vercel, Cloudflare, Node.js)
Styling	Tailwind CSS v4
Components	Shadcn-ui
Routing	TanStack Router (file-based, type-safe)
Data Fetching	TanStack React Query
Tables	TanStack Table
Forms	TanStack Form + Zod
Charts	Recharts
State Management	Zustand
Command+K	kbar
Themes	tweakcn
Linter / Formatter	OxLint / Oxfmt

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

Page	Description
Dashboard Overview	Cards with Recharts graphs. Suspense boundaries for independent loading/error per section.
Product List (Table)	TanStack Table + React Query (route loader prefetch + client cache) with URL search params for search, filter, pagination.
Create Product Form	TanStack Form + Zod with useMutation for create/update. Cache invalidation on success.
Users (Table)	Users table with React Query + URL state pattern. Same architecture as Products.
React Query Demo	Pokemon API showcase demonstrating route loader + useSuspenseQuery pattern with client-side cache.
Kanban Board	Drag n Drop task management board with dnd-kit and Zustand. Column sorting, task cards with priority badges.
Chat	Messaging UI with conversation list, message bubbles, quick replies, file attachments.
Notifications	Notification center with bell icon badge, popover preview, and dedicated full page with tabs.
Forms	Basic, Multi-step, Sheet/Dialog, and Advanced form patterns with TanStack Form + Zod.
Not Found	Custom 404 page via TanStack Router's defaultNotFoundComponent.

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

Concept	Next.js	TanStack Start
Routing	App Router (app/)	File-based (routes/) with type-safe params
Data Fetching	Server Components + HydrationBoundary	Route loader + useSuspenseQuery
Layouts	layout.tsx nesting	Layout routes with <Outlet />
Server Code	'use server' actions	createServerFn()
Build Tool	Webpack/Turbopack	Vite
Deployment	next start	Nitro (any platform)
URL State	nuqs	TanStack Router useSearch() + validateSearch

Support

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

Cheers!