tanstack - freeCodeCamp.org

How to Build an Admin Dashboard with shadcn/ui and TanStack Start

Ajay Patel — Thu, 04 Dec 2025 16:57:05 +0000

In this guide, we’ll build a feature-rich admin dashboard using shadcn/ui for beautiful, reusable components and TanStack Start for a powerful, type-safe full-stack framework.

By the end, you’ll have:

A fully functional /dashboard layout
A statistics-rich dashboard home page with charts and tables
A Products page using TanStack Query and TanStack Table
A Settings page with profile and notification controls

Why TanStack Start?
Why shadcn/ui?
How to Build the Admin Dashboard Using shadcn/ui and TanStack Start
Live Demo & Source Code
Summary
- What’s Next?
- Resources:

Prerequisites

Before we start the guide, let’s understand the basic requirements of the project:

Node.js 18+ installed
Basic knowledge of React and TypeScript
Familiarity with TailwindCSS

What we will build

In this article, we’ll build a fully functional admin dashboard with three main sections:

Dashboard overview: A home page that displays various charts showing sales metrics, product insights widgets, and a transaction history table.
Products: A product page that demonstrates data fetching, server-side pagination, and advanced table features like column searching, sorting, and column filtering.
Settings: A user-friendly settings page with profile management and notification preferences.

The dashboard will include a responsive sidebar navigation, breadcrumb trails, a user profile dropdown, and a language selector.

Why TanStack Start?

TanStack Start is a modern full-stack React framework built on top of TanStack Router. It aims to be a flexible, type-safe alternative to traditional meta-frameworks like Next.js.

Some key benefits of TanStack Start include:

Type-safe routing and data loading
Server-side rendering (SSR) out of the box
Built on TanStack Router, with file-based routing
Great DX with TypeScript and TanStack Query integration

We’ll pair it with shadcn/ui to quickly build a polished admin dashboard.

Why shadcn/ui?

shadcn/ui is a collection of beautifully designed, accessible React components built on top of Radix UI and styled with Tailwind CSS.

Instead of installing a package, you can copy and paste the component's code directly into your project or use a CLI to generate it. This gives you full control over the code structure & styling. This approach makes Shadcn highly customizable for frameworks like TanStack Start, Next.js, Astro, and so on.

How to Build the Admin Dashboard Using shadcn/ui and TanStack Start

1. Create a new TanStack app

To get started, you’ll need to create a new TanStack Start app. You can do that with the following command:

pnpm create @tanstack/start@latest

During the CLI setup, when it asks about add-ons, make sure to select:

Shadcn
Table
Query

These will give you the shadcn/ui setup and the TanStack Query + Table integrations we’ll use later.

2. Initial Cleanup

TanStack Start’s starter template comes with some demo routes and a header we don’t need.

Clean up the project as follows:

Remove the demo folder inside the src/routes directory (or wherever your router directory lives).
Delete Header.tsx from src/components.
Remove the Header import and usage from src/routes/__root.tsx.
Clean up the src/routes/index.tsx file to something minimal (or leave a simple landing page).

At this point, you can make the initial commit to your repo.

3. Setting Up shadcn/studio Blocks

Before we set up, let’s make sure you’re clear on what the shadcn/studio and Shadcn registries are.

What is shadcn/studio?

shadcn/studio is an open-source collection of copy-and-paste shadcn/ui components, blocks, and templates. It’s paired with a powerful shadcn theme generator to help you craft, customize, and ship faster.

What is Shadcn Registry?

A shadcn registry is a system for sharing and distributing reusable code assets such as UI components, hooks, and theme configurations across different projects. Running your own registry allows you to publish your custom components that others can then use. The registry uses a registry.json file to define and organize the components and their associated files.

If you want to know more about registries, you can refer to the official documentation here.

For quick building, we will use shadcn/studio’s free shadcn block – dashboard shell.

First, configure the registries in your components.json:

{
  // ...existing config
  "registries": {
    "@shadcn-studio": "https://shadcnstudio.com/r/{name}.json",
    "@ss-components": "https://shadcnstudio.com/r/components/{name}.json",
    "@ss-blocks": "https://shadcnstudio.com/r/blocks/{name}.json",
    "@ss-themes": "https://shadcnstudio.com/r/themes/{name}.json"
  }
}

If you face any issues while setting up, you can refer to the docs.

Install the Dashboard Shell Block

To get started, visit Shadcn blocks and navigate to the Dashboard and App section. Then select the Dashboard Shell 1 block (it’s free to use).

On the top-right, you’ll see a command to install the block into your project:

Copy that command, paste it into your terminal, and run it. This will install all the components needed for the dashboard layout (sidebar, header, dropdowns, and so on).

4. Routing Structure for the Dashboard

Next, we’ll set up the dashboard routes.

First, create a new layout route for /dashboard by adding a file at:

src/routes/dashboard.tsx

Then, inside a dashboard directory, create the three pages that will live under this layout:

src/routes/dashboard/index.tsx – main dashboard overview
src/routes/dashboard/products.tsx – products table page
src/routes/dashboard/settings.tsx – settings page

Your routes folder should look like this:

src/routes/
├── __root.tsx
├── index.tsx
├── dashboard.tsx          // Layout for all /dashboard/* pages
└── dashboard/
    ├── index.tsx          // /dashboard
    ├── products.tsx       // /dashboard/products
    └── settings.tsx       // /dashboard/settings

5. Creating the `/dashboard` Layout

This will set up the layout for the dashboard. Create src/routes/dashboard.tsx and paste:

file: src/routes/dashboard.tsx

import LanguageDropdown from '@/components/shadcn-studio/blocks/dropdown-language'
import ProfileDropdown from '@/components/shadcn-studio/blocks/dropdown-profile'
import { Avatar, AvatarImage } from '@/components/ui/avatar'
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator
} from '@/components/ui/breadcrumb'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import {
    Sidebar,
    SidebarContent,
    SidebarGroup,
    SidebarGroupContent,
    SidebarGroupLabel,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarProvider,
    SidebarTrigger
} from '@/components/ui/sidebar'
import { createFileRoute, Link, Outlet, useLocation } from '@tanstack/react-router'
import {
    FacebookIcon,
    InstagramIcon,
    LanguagesIcon,
    LayoutDashboard,
    LinkedinIcon,
    LogIn,
    Package,
    Settings,
    TwitterIcon,
    User2
} from 'lucide-react'
import React from 'react'

export const Route = createFileRoute('/dashboard')({
    component: DashboardLayout
})

function DashboardLayout() {
    const location = useLocation()
    const pathSegments = location.pathname.split('/').filter(Boolean)

    return (
        'flex min-h-dvh w-full'>
            
                
                    
                        
                            
                                
                                    "lg" asChild>
                                        "/">
                                            "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
                                                "size-4" />
                                            
                                            "grid flex-1 text-left text-sm leading-tight">
                                                "truncate font-semibold">Your App
                                                "truncate text-xs">Dashboard
                                            
                                        
                                    
                                
                            
                        

                        
                            General
                            
                                
                                    
                                        
                                            '/dashboard'>
                                                
                                                Dashboard
                                            
                                        
                                    
                                    
                                        
                                            '/dashboard/products'>
                                                
                                                Products
                                            
                                        
                                    
                                    
                                        
                                            '/dashboard/settings'>
                                                
                                                Settings
                                            
                                        
                                    
                                
                            
                        
                    
                
                'flex flex-1 flex-col'>
                    'bg-card sticky top-0 z-50 border-b'>
                        'mx-auto flex max-w-7xl items-center justify-between gap-6 px-4 py-2 sm:px-6'>
                            'flex items-center gap-4'>
                                '[&_svg]:h-5 [&_svg]:w-5' />
                                'vertical' className='hidden h-4 sm:block' />
                                'hidden sm:block'>
                                    
                                        
                                            
                                                '/'>Home
                                            
                                        
                                        
                                        {pathSegments.map((segment, index) => {
                                            const path = `/${pathSegments.slice(0, index + 1).join('/')}`
                                            const isLast = index === pathSegments.length - 1
                                            const title = segment.charAt(0).toUpperCase() + segment.slice(1)

                                            return (
                                                
                                                    
                                                        {isLast ? (
                                                            {title}
                                                        ) : (
                                                            
                                                                as any}>{title}
                                                            
                                                        )}
                                                    
                                                    {!isLast && }
                                                
                                            )
                                        })}
                                    
                                
                            
                            'flex items-center gap-1.5'>
                                'ghost' size='icon'>
                                            
                                        
                                    }
                                />
                                'ghost' size='icon' className='h-10 w-10'>
                                            'h-10 w-10 rounded-md'>
                                                'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-1.png' />
                                            
                                        
                                    }
                                />
                            
                        
                    
                    'mx-auto w-full max-w-7xl flex-1 px-4 py-6 sm:px-6'>
                        
                    
                    
                        'text-muted-foreground mx-auto flex w-full items-center justify-between gap-3 px-4 py-3 flex-col sm:flex-row sm:gap-6 sm:px-6'>
                            'text-sm text-center sm:text-left'>
                                {`©${new Date().getFullYear()}`}{' '}
                                '#' className='text-primary'>
                                    TanStack Start
                                
                                , Made for better web design
                            
                            'flex items-center gap-5'>
                                '#'>
                                    'h-4 w-4' />
                                
                                '#'>
                                    'h-4 w-4' />
                                
                                '#'>
                                    'h-4 w-4' />
                                
                                '#'>
                                    'h-4 w-4' />
                                
                            
                        
                    
                
            
        
    )
}

You now have a full layout for all /dashboard/* routes.

Let's break down the key parts of our dashboard layout:

Sidebar structure: The component wraps our navigation menu. Inside, we use and to create navigation links. Each menu item uses TanStack Router's component for type-safe navigation. We also have a header set up in the
Dynamic breadcrumbs: The breadcrumb section uses location.pathname to split the current URL into segments, then maps over them to create breadcrumb links. The isLast check ensures the final breadcrumb renders as plain text rather than a link.
Header actions: The header includes two dropdowns: for internationalization and for user account actions. These come from the shadcn/studio blocks we installed.
Outlet component: The component is where child routes (like /dashboard, /dashboard/products) will render. This makes our layout reusable across all dashboard pages. The layout uses Tailwind's utility classes for spacing, colors, and responsive behavior, making it easy to customize for your use case.

For more details regarding the Sidebar component, you can refer to the official docs here.

You now have a full layout for all /dashboard/* routes.

6. Building the Dashboard Home Page

Create src/routes/dashboard/index.tsx:

import { type Item } from '@/components/shadcn-studio/blocks/datatable-transaction'
import { createFileRoute } from '@tanstack/react-router'

import { Card } from '@/components/ui/card'

import SalesMetricsCard from '@/components/shadcn-studio/blocks/chart-sales-metrics'
import TransactionDatatable from '@/components/shadcn-studio/blocks/datatable-transaction'
import StatisticsCard from '@/components/shadcn-studio/blocks/statistics-card-01'
import ProductInsightsCard from '@/components/shadcn-studio/blocks/widget-product-insights'
import TotalEarningCard from '@/components/shadcn-studio/blocks/widget-total-earning'

import {
    CalendarX2Icon,
    TriangleAlertIcon,
    TruckIcon
} from 'lucide-react'

// Statistics card data
const StatisticsCardData = [
    {
        icon: 'h-4 w-4' />,
        value: '42',
        title: 'Shipped Orders',
        changePercentage: '+18.2%'
    },
    {
        icon: 'h-4 w-4' />,
        value: '8',
        title: 'Damaged Returns',
        changePercentage: '-8.7%'
    },
    {
        icon: 'h-4 w-4' />,
        value: '27',
        title: 'Missed Delivery Slots',
        changePercentage: '+4.3%'
    }
]

// Earning data for Total Earning card
const earningData = [
    {
        img: 'https://cdn.shadcnstudio.com/ss-assets/blocks/dashboard-application/widgets/zipcar.png',
        platform: 'Zipcar',
        technologies: 'Vuejs & HTML',
        earnings: '-$23,569.26',
        progressPercentage: 75
    },
    {
        img: 'https://cdn.shadcnstudio.com/ss-assets/blocks/dashboard-application/widgets/bitbank.png',
        platform: 'Bitbank',
        technologies: 'Figma & React',
        earnings: '-$12,650.31',
        progressPercentage: 25
    }
]

// Transaction table data
const transactionData: Item[] = [
    {
        id: '1',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-1.png',
        avatarFallback: 'JA',
        name: 'Jack Alfredo',
        amount: 315.0,
        status: 'paid',
        email: 'jack@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '2',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-2.png',
        avatarFallback: 'MG',
        name: 'Maria Gonzalez',
        amount: 253.4,
        status: 'pending',
        email: 'maria.g@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '3',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png',
        avatarFallback: 'JD',
        name: 'John Doe',
        amount: 852.0,
        status: 'paid',
        email: 'john.doe@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '4',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-4.png',
        avatarFallback: 'EC',
        name: 'Emily Carter',
        amount: 889.0,
        status: 'pending',
        email: 'emily.carter@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '5',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png',
        avatarFallback: 'DL',
        name: 'David Lee',
        amount: 723.16,
        status: 'paid',
        email: 'david.lee@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '6',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-6.png',
        avatarFallback: 'SP',
        name: 'Sophia Patel',
        amount: 612.0,
        status: 'failed',
        email: 'sophia.patel@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '7',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-7.png',
        avatarFallback: 'RW',
        name: 'Robert Wilson',
        amount: 445.25,
        status: 'paid',
        email: 'robert.wilson@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '8',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-8.png',
        avatarFallback: 'LM',
        name: 'Lisa Martinez',
        amount: 297.8,
        status: 'processing',
        email: 'lisa.martinez@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '9',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-9.png',
        avatarFallback: 'MT',
        name: 'Michael Thompson',
        amount: 756.9,
        status: 'paid',
        email: 'michael.thompson@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '10',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-10.png',
        avatarFallback: 'AJ',
        name: 'Amanda Johnson',
        amount: 189.5,
        status: 'pending',
        email: 'amanda.johnson@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '11',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-11.png',
        avatarFallback: 'KB',
        name: 'Kevin Brown',
        amount: 1024.75,
        status: 'paid',
        email: 'kevin.brown@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '12',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-12.png',
        avatarFallback: 'SD',
        name: 'Sarah Davis',
        amount: 367.2,
        status: 'failed',
        email: 'sarah.davis@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '13',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-13.png',
        avatarFallback: 'CG',
        name: 'Christopher Garcia',
        amount: 598.45,
        status: 'processing',
        email: 'christopher.garcia@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '14',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-14.png',
        avatarFallback: 'JR',
        name: 'Jennifer Rodriguez',
        amount: 821.3,
        status: 'paid',
        email: 'jennifer.rodriguez@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '15',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-15.png',
        avatarFallback: 'DM',
        name: 'Daniel Miller',
        amount: 156.75,
        status: 'pending',
        email: 'daniel.miller@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '16',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-16.png',
        avatarFallback: 'NW',
        name: 'Nicole White',
        amount: 934.1,
        status: 'paid',
        email: 'nicole.white@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '17',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-17.png',
        avatarFallback: 'AL',
        name: 'Anthony Lopez',
        amount: 412.85,
        status: 'failed',
        email: 'anthony.lopez@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '18',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-18.png',
        avatarFallback: 'MH',
        name: 'Michelle Harris',
        amount: 675.5,
        status: 'processing',
        email: 'michelle.harris@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '19',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-19.png',
        avatarFallback: 'JC',
        name: 'James Clark',
        amount: 289.95,
        status: 'paid',
        email: 'james.clark@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '20',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-20.png',
        avatarFallback: 'RL',
        name: 'Rachel Lewis',
        amount: 1156.25,
        status: 'pending',
        email: 'rachel.lewis@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '21',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-21.png',
        avatarFallback: 'TY',
        name: 'Thomas Young',
        amount: 543.6,
        status: 'paid',
        email: 'thomas.young@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '22',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-22.png',
        avatarFallback: 'SB',
        name: 'Stephanie Brown',
        amount: 789.3,
        status: 'processing',
        email: 'stephanie.brown@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '23',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-23.png',
        avatarFallback: 'BM',
        name: 'Brandon Moore',
        amount: 425.75,
        status: 'failed',
        email: 'brandon.moore@shadcnstudio.com',
        paidBy: 'visa'
    },
    {
        id: '24',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-24.png',
        avatarFallback: 'KT',
        name: 'Kelly Taylor',
        amount: 1203.5,
        status: 'paid',
        email: 'kelly.taylor@shadcnstudio.com',
        paidBy: 'mastercard'
    },
    {
        id: '25',
        avatar: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-25.png',
        avatarFallback: 'MA',
        name: 'Mark Anderson',
        amount: 356.2,
        status: 'pending',
        email: 'mark.anderson@shadcnstudio.com',
        paidBy: 'visa'
    }
]

export const Route = createFileRoute('/dashboard/')({
    component: RouteComponent,
})

function RouteComponent() {
    return (
        'grid grid-cols-2 gap-6 lg:grid-cols-3'>
            {/* Statistics Cards */}
            'col-span-full grid gap-6 sm:grid-cols-3 md:max-lg:grid-cols-1'>
                {StatisticsCardData.map((card, index) => (
                    
                ))}
            

            'grid gap-6 max-xl:col-span-full lg:max-xl:grid-cols-2'>
                {/* Product Insights Card */}
                'justify-between gap-3 *:data-[slot=card-content]:space-y-5' />

                {/* Total Earning Card */}
                'Total Earning'
                    earning={24650}
                    trend='up'
                    percentage={10}
                    comparisonText='Compare to last year ($84,325)'
                    earningData={earningData}
                    className='justify-between gap-5 sm:min-w-0 *:data-[slot=card-content]:space-y-7'
                />
            

            'col-span-full xl:col-span-2 *:data-[slot=card-content]:space-y-6' />
            'col-span-full w-full py-0'>
                
            
        
    )
}

Our dashboard homepage uses various shadcn-studio blocks like:

Statistics cards display KPIs (Shipped Orders, Damaged Returns, and so on) with trend indicators. Each card receives props for the icon, value, title, and percentage change, making them reusable for any metric.
Chart components like use recharts under the hood to visualize data. The styling comes from shadcn/ui's card component and Tailwind utilities.
Transaction data table demonstrates TanStack Table integration. We pass an array of transaction objects, and the component handles rendering, sorting, and pagination. Notice how we use TypeScript's Item[] type for full type safety.

If you now navigate to /dashboard, you should see an admin dashboard with KPI statistics, charts, a dashboard, and a transaction table. Here is what it would look like:

We have built this beautiful dashboard quickly by using the shadcn/studio’s pre-built blocks.

7. Set up the Products Page.

Before building our products table, we need to install Zod, a TypeScript-first schema validation library. We'll use it to validate the data structure of requests to our server function.

Why Zod?

TanStack Start's server functions use Zod to ensure type-safe data transfer between client and server. When we request to fetch products, Zod validates that the request includes the correct types for page, pageSize, sortBy, and filters. This catches errors at runtime and provides excellent TypeScript inference.

Now, let’s set up the products page with a products table. But before that, let’s install the zod package dependency. Here is the command for it:

pnpm add zod

Creating Mock Product Data

We will need to store our mock products’ data somewhere. For that, we will create a new file data/products.ts and paste the code below. This will help us mock the product data for our products table.

import { createServerFn } from "@tanstack/react-start";
import { z } from "zod";

export type Product = {
    id: string
    name: string
    category: string
    price: number
    stock: number
    status: 'active' | 'draft' | 'archived'
    image: string
}

// Define the type for the data parameter
type ProductQueryParams = {
    page: number;
    pageSize: number;
    sortBy?: string;
    sortOrder?: "asc" | "desc";
    filters?: {
        name?: string;
        category?: string;
        status?: string;
    };
};

const products: Product[] = [
    {
        id: 'PROD-001',
        name: 'Wireless Noise Cancelling Headphones',
        category: 'Electronics',
        price: 299.99,
        stock: 45,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=100&q=80',
    },
    {
        id: 'PROD-002',
        name: 'Ergonomic Office Chair',
        category: 'Furniture',
        price: 199.50,
        stock: 12,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1592078615290-033ee584e267?w=100&q=80',
    },
    {
        id: 'PROD-003',
        name: 'Mechanical Gaming Keyboard',
        category: 'Electronics',
        price: 129.99,
        stock: 0,
        status: 'archived',
        image: 'https://images.unsplash.com/photo-1587829741301-dc798b91add1?w=100&q=80',
    },
    {
        id: 'PROD-004',
        name: 'Smart Fitness Watch',
        category: 'Wearables',
        price: 149.00,
        stock: 89,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=100&q=80',
    },
    {
        id: 'PROD-005',
        name: 'Minimalist Desk Lamp',
        category: 'Lighting',
        price: 45.00,
        stock: 23,
        status: 'draft',
        image: 'https://images.unsplash.com/photo-1507473888900-52e1ad14723b?w=100&q=80',
    },
    {
        id: 'PROD-006',
        name: 'Portable Bluetooth Speaker',
        category: 'Electronics',
        price: 79.99,
        stock: 150,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1608043152269-423dbba4e7e1?w=100&q=80',
    },
    {
        id: 'PROD-007',
        name: 'Ceramic Coffee Mug Set',
        category: 'Kitchen',
        price: 24.99,
        stock: 200,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1514228742587-6b1558fcca3d?w=100&q=80',
    },
    {
        id: 'PROD-008',
        name: 'Leather Messenger Bag',
        category: 'Accessories',
        price: 129.50,
        stock: 15,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=100&q=80',
    },
    {
        id: 'PROD-009',
        name: 'Wireless Charging Pad',
        category: 'Electronics',
        price: 39.99,
        stock: 75,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1586816879360-004f5b0c51e3?w=100&q=80',
    },
    {
        id: 'PROD-010',
        name: 'Succulent Plant Set',
        category: 'Home & Garden',
        price: 29.99,
        stock: 30,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1485955900006-10f4d324d411?w=100&q=80',
    },
    {
        id: 'PROD-011',
        name: 'Professional Chef Knife',
        category: 'Kitchen',
        price: 89.95,
        stock: 42,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1593618998160-e34014e67546?w=100&q=80',
    },
    {
        id: 'PROD-012',
        name: 'Yoga Mat',
        category: 'Fitness',
        price: 35.00,
        stock: 100,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1601925260368-ae2f83cf8b7f?w=100&q=80',
    },
    {
        id: 'PROD-013',
        name: 'Smart Thermostat',
        category: 'Home Automation',
        price: 199.00,
        stock: 0,
        status: 'archived',
        image: 'https://images.unsplash.com/photo-1567789884554-0b844b597180?w=100&q=80',
    },
    {
        id: 'PROD-014',
        name: 'Vintage Film Camera',
        category: 'Photography',
        price: 450.00,
        stock: 3,
        status: 'draft',
        image: 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=100&q=80',
    },
    {
        id: 'PROD-015',
        name: 'Cotton T-Shirt Pack',
        category: 'Apparel',
        price: 49.99,
        stock: 150,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=100&q=80',
    },
    {
        id: 'PROD-016',
        name: 'Electric Toothbrush',
        category: 'Personal Care',
        price: 69.99,
        stock: 55,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1559656914-a30970c1affd?w=100&q=80',
    },
    {
        id: 'PROD-017',
        name: 'Gaming Mouse',
        category: 'Electronics',
        price: 59.99,
        stock: 88,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1527864550417-7fd91fc51a46?w=100&q=80',
    },
    {
        id: 'PROD-018',
        name: 'Essential Oil Diffuser',
        category: 'Home & Garden',
        price: 34.50,
        stock: 25,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1602928321679-560bb453f190?w=100&q=80',
    },
    {
        id: 'PROD-019',
        name: 'Running Shoes',
        category: 'Footwear',
        price: 119.99,
        stock: 60,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=100&q=80',
    },
    {
        id: 'PROD-020',
        name: 'Digital Drawing Tablet',
        category: 'Electronics',
        price: 249.00,
        stock: 18,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1561525140-c2a4cc68e4bd?w=100&q=80',
    },
    {
        id: 'PROD-021',
        name: 'Bamboo Cutting Board',
        category: 'Kitchen',
        price: 22.99,
        stock: 95,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1594385208974-2e75f8d7bb48?w=100&q=80',
    },
    {
        id: 'PROD-022',
        name: 'Sunglasses',
        category: 'Accessories',
        price: 159.00,
        stock: 40,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1511499767150-a48a237f0083?w=100&q=80',
    },
    {
        id: 'PROD-023',
        name: 'Water Bottle',
        category: 'Fitness',
        price: 19.99,
        stock: 300,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1602143407151-01114192003f?w=100&q=80',
    },
    {
        id: 'PROD-024',
        name: 'Throw Pillow Set',
        category: 'Home Decor',
        price: 45.99,
        stock: 28,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1584100936595-c0654b55a2e6?w=100&q=80',
    },
    {
        id: 'PROD-025',
        name: 'Wireless Earbuds',
        category: 'Electronics',
        price: 89.99,
        stock: 120,
        status: 'active',
        image: 'https://images.unsplash.com/photo-1590658268037-6bf12165a8df?w=100&q=80',
    }
]

export const getProducts = createServerFn({ method: "GET" })
    .inputValidator(
        z.object({
            page: z.number().default(0),
            pageSize: z.number().default(10),
            sortBy: z.string().optional(),
            sortOrder: z.enum(["asc", "desc"]).optional(),
            filters: z
                .object({
                    name: z.string().optional(),
                    category: z.string().optional(),
                    status: z.string().optional(),
                })
                .optional(),
        })
    )
    .handler(async ({ data }: { data: ProductQueryParams }) => {
        const { page, pageSize, sortBy, sortOrder, filters } = data;

        // Apply filters
        let filteredProducts = [...products];

        if (filters) {
            if (filters.name) {
                filteredProducts = filteredProducts.filter((product) =>
                    product.name.toLowerCase().includes(filters.name!.toLowerCase())
                );
            }

            if (filters.category) {
                filteredProducts = filteredProducts.filter(
                    (product) =>
                        product.category.toLowerCase() === filters.category!.toLowerCase()
                );
            }

            if (filters.status) {
                filteredProducts = filteredProducts.filter(
                    (product) => product.status === filters.status
                );
            }
        }

        // Apply sorting
        if (sortBy) {
            filteredProducts.sort((a, b) => {
                const aValue = a[sortBy as keyof Product];
                const bValue = b[sortBy as keyof Product];

                if (typeof aValue === "string" && typeof bValue === "string") {
                    return sortOrder === "desc"
                        ? bValue.localeCompare(aValue)
                        : aValue.localeCompare(bValue);
                }

                if (typeof aValue === "number" && typeof bValue === "number") {
                    return sortOrder === "desc" ? bValue - aValue : aValue - bValue;
                }

                return 0;
            });
        }

        // Calculate pagination
        const totalCount = filteredProducts.length;
        const totalPages = Math.ceil(totalCount / pageSize);
        const paginatedProducts = filteredProducts.slice(
            page * pageSize,
            (page + 1) * pageSize
        );

        // Simulate network delay
        await new Promise((resolve) => setTimeout(resolve, 500));

        return {
            products: paginatedProducts,
            pagination: {
                page,
                pageSize,
                totalCount,
                totalPages,
            },
        };
    });

Let’s understand the server function and break down what's happening in getProducts:

Input validation: The .inputValidator() method uses a Zod schema to validate incoming requests. It ensures page and pageSize are numbers, sortOrder is either "asc" or "desc", and filters are optional strings.
Filtering products: The function filters the products array based on the provided filters (name, category, status). This simulates what a real database query would do.
Sorting: Products are sorted by the specified column (sortBy) in ascending or descending order (sortOrder).
Pagination: We calculate which slice of products to return based on page and pageSize, along with metadata like totalCount and totalPages.

Create the Products table:

Once the data is done, let’s create a table in /dashboard/products.tsx. This table will use our mock product data and will provide multiple functions in the table, like search, sort, and filter. This table demonstrates the powerful combination of TanStack Query for data management and TanStack Table for rendering.

Paste the code below in the products.tsx file:

import { useQuery } from '@tanstack/react-query'
import { createFileRoute } from '@tanstack/react-router'
import {
    ColumnDef,
    ColumnFiltersState,
    flexRender,
    getCoreRowModel,
    getFilteredRowModel,
    getPaginationRowModel,
    getSortedRowModel,
    SortingState,
    useReactTable,
    VisibilityState,
} from '@tanstack/react-table'
import {
    ArrowUpDown,
    ChevronDown,
    Filter,
    Loader2,
    MoreHorizontal,
    Plus,
    Search
} from 'lucide-react'
import { useState } from 'react'

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Input } from '@/components/ui/input'
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table'
import { getProducts, type Product } from '@/data/products'

export const Route = createFileRoute('/dashboard/products')({
    component: ProductsPage,
})

export const columns: ColumnDef[] = [
    {
        accessorKey: 'name',
        header: ({ column }) => {
            return (
                
            )
        },
        cell: ({ row }) => (
            "flex items-center gap-3">
                'name')}
                    className="h-10 w-10 rounded-md object-cover"
                />
                "flex flex-col">
                    "font-medium">{row.getValue('name')}
                    "text-xs text-muted-foreground">{row.original.id}
                
            
        ),
    },
    {
        accessorKey: 'category',
        header: 'Category',
        cell: ({ row }) => {row.getValue('category')},
    },
    {
        accessorKey: 'status',
        header: 'Status',
        cell: ({ row }) => {
            const status = row.getValue('status') as string
            return (
                'active' ? 'default' : status === 'draft' ? 'secondary' : 'outline'}>
                    {status}
                
            )
        },
    },
    {
        accessorKey: 'price',
        header: () => "text-right">Price,
        cell: ({ row }) => {
            const amount = parseFloat(row.getValue('price'))
            const formatted = new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: 'USD',
            }).format(amount)

            return "text-right font-medium">{formatted}
        },
    },
    {
        accessorKey: 'stock',
        header: () => "text-right">Stock,
        cell: ({ row }) => {
            const stock = parseFloat(row.getValue('stock'))
            return ${stock === 0 ? 'text-red-500 font-medium' : ''}`}>{stock}
        },
    },
    {
        id: 'actions',
        enableHiding: false,
        cell: ({ row }) => {
            const product = row.original

            return (
                
                    
                        
                    
                    "end">
                        Actions
                         navigator.clipboard.writeText(product.id)}
                        >
                            Copy Product ID
                        
                        
                        Edit Product
                        View Details
                    
                
            )
        },
    },
]

function ProductsPage() {
    const [sorting, setSorting] = useState([])
    const [columnFilters, setColumnFilters] = useState([])
    const [columnVisibility, setColumnVisibility] = useState({})
    const [rowSelection, setRowSelection] = useState({})
    const [pagination, setPagination] = useState({
        pageIndex: 0,
        pageSize: 10,
    })

    const { data, isLoading } = useQuery({
        queryKey: ['products', pagination, sorting, columnFilters],
        queryFn: () => getProducts({
            data: {
                page: pagination.pageIndex,
                pageSize: pagination.pageSize,
                sortBy: sorting[0]?.id,
                sortOrder: sorting[0]?.desc ? 'desc' : 'asc',
                filters: {
                    name: (columnFilters.find((f) => f.id === 'name')?.value as string) || undefined,
                    status: (columnFilters.find((f) => f.id === 'status')?.value as string) || undefined,
                }
            }
        }),
    })

    const products = data?.products || []
    const totalPages = data?.pagination.totalPages || 0
    const totalCount = data?.pagination.totalCount || 0

    const table = useReactTable({
        data: products,
        columns,
        pageCount: totalPages,
        manualPagination: true,
        manualSorting: true,
        manualFiltering: true,
        onSortingChange: setSorting,
        onColumnFiltersChange: setColumnFilters,
        getCoreRowModel: getCoreRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        getSortedRowModel: getSortedRowModel(),
        getFilteredRowModel: getFilteredRowModel(),
        onColumnVisibilityChange: setColumnVisibility,
        onRowSelectionChange: setRowSelection,
        onPaginationChange: setPagination,
        state: {
            sorting,
            columnFilters,
            columnVisibility,
            rowSelection,
            pagination,
        },
    })

    return (
        "w-full space-y-4">
            "flex items-center justify-between">
                "text-2xl font-bold tracking-tight">Products
                "flex items-center gap-2">
                    
                    
                
            

            
                
                    Product Management
                    
                        Manage your product catalog, track inventory, and update prices.
                    
                
                
                    "flex items-center py-4 gap-2">
                        "relative flex-1">
                            "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                            "Filter products..."
                                value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
                                onChange={(event) =>
                                    table.getColumn("name")?.setFilterValue(event.target.value)
                                }
                                className="pl-8 max-w-sm"
                            />
                        
                        
                            
                                
                            
                            "end">
                                {table
                                    .getAllColumns()
                                    .filter((column) => column.getCanHide())
                                    .map((column) => {
                                        return (
                                            "capitalize"
                                                checked={column.getIsVisible()}
                                                onCheckedChange={(value) =>
                                                    column.toggleVisibility(!!value)
                                                }
                                            >
                                                {column.id}
                                            
                                        )
                                    })}
                            
                        
                    
                    "rounded-md border">
                        
                                {table.getHeaderGroups().map((headerGroup) => (
                                    
                                        {headerGroup.headers.map((header) => {
                                            return (
                                                
                                                    {header.isPlaceholder
                                                        ? null
                                                        : flexRender(
                                                            header.column.columnDef.header,
                                                            header.getContext()
                                                        )}
                                                
                                            )
                                        })}
                                    
                                ))}
                            
                                {isLoading ? (
                                    
                                        "h-24 text-center">
                                            "flex items-center justify-center gap-2">
                                                "h-6 w-6 animate-spin" />
                                                Loading products...
                                            
                                        
                                    
                                ) : table.getRowModel().rows?.length ? (
                                    table.getRowModel().rows.map((row) => (
                                        "selected"}
                                        >
                                            {row.getVisibleCells().map((cell) => (
                                                
                                                    {flexRender(
                                                        cell.column.columnDef.cell,
                                                        cell.getContext()
                                                    )}
                                                
                                            ))}
                                        
                                    ))
                                ) : (
                                    
                                        "h-24 text-center"
                                        >
                                            No results.
                                        
                                    
                                )}
                            
                            
                            
                        
                    
                    "flex items-center justify-end space-x-2 py-4">
                        "flex-1 text-sm text-muted-foreground">
                            {table.getFilteredSelectedRowModel().rows.length} of{" "}
                            {totalCount} row(s) selected.
                        
                        "space-x-2">
                            
                            
                        
                    
                
            
        
    )
}

Now you can see the fully functional products page by navigating the /products where you can search and sort the products.

How do TanStack Query and TanStack Table Work in the products table?

Our products page uses TanStack Query for data fetching and TanStack Table for rendering.

useQuery is a fundamental hook in TanStack Query for managing server state in web applications. It simplifies data fetching, caching, and synchronization.

The below code snippet below shows how we have used useQuery in our product table:

import { useQuery } from '@tanstack/react-query';

const { data, isLoading } = useQuery({
    queryKey: ['products', pagination, sorting, columnFilters],
    queryFn: () => getProducts({...})
}

The useQuery hook manages data fetching in our application. For more details, you can refer to the official docs here.

useReactTable:

import { useReactTable } from '@tanstack/react-table'

const table = useReactTable({
    data: products,
    columns,
    manualPagination: true,
    manualSorting: true,
    manualFiltering: true,
})

TanStack Table manages the UI state and rendering. By setting manualPagination, manualSorting, and manualFiltering to true, we tell the table that server-side logic handles these operations.

When users sort, filter, or paginate, the table updates its states, and React Query detects the state change in the queryKey. It refetches data from the server, and the table re-renders with fresh data.

This architecture is production-ready and scales to thousands of rows. You just need to replace the mock API endpoint with your real API endpoint.

8. Settings Page

Finally, let’s add a simple Settings page with a profile section and some basic notification preferences.

Below is the code for the Settings Page. You can paste it into /dashboard/settings.tsx:

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from '@/components/ui/input'
import { Separator } from '@/components/ui/separator'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/dashboard/settings')({
  component: SettingsPage,
})

function SettingsPage() {
  return (
    "space-y-6">
      
        "text-lg font-medium">Settings
        "text-sm text-muted-foreground">
          Manage your account settings and set e-mail preferences.
        
      
      

      "grid gap-6">
        
          
            Profile
            
              This is how others will see you on the site.
            
          
          "space-y-4">
            "flex items-center gap-4">
              "h-20 w-20">
                "https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-1.png" />
                JD
              
              
            
            "space-y-1">
              "username" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Username
              "username" defaultValue="jdoe" />
            
            "space-y-1">
              "email" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Email
              "email" defaultValue="john.doe@example.com" />
            
            "space-y-1">
              "bio" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Bio
              "bio" placeholder="Tell us a little bit about yourself" />
            
          
          
            
          
        

        
          
            Notifications
            
              Configure how you receive notifications.
            
          
          "space-y-4">
            "flex items-center justify-between rounded-lg border p-4">
              "space-y-0.5">
                "text-base font-medium">Communication emails
                "text-sm text-muted-foreground">
                  Receive emails about your account activity.
                
              
              {/* Toggle would go here, using a simple checkbox for now */}
              
            
            "flex items-center justify-between rounded-lg border p-4">
              "space-y-0.5">
                "text-base font-medium">Marketing emails
                "text-sm text-muted-foreground">
                  Receive emails about new products, features, and more.
                
              
              
            
          
          
            
          
        
      
    
  )
}

In this page, we have created two sections:

Profile Section
Notification Section

These two sections have been built using shadcn/ui components like Card, Footer, Checkbox, Avatar, Input, and so on.

At this point, we have:

A dashboard layout with sidebar, header, breadcrumbs, and footer
A Dashboard page with charts, insights, and a transaction table
A Products page powered by:
- TanStack Start server functions
- TanStack Query
- TanStack Table
A clean Settings page using shadcn/ui components

Live Demo & Source Code

You can check out the full source code on GitHub here:

GitHub Repository: https://github.com/themeselection/tanstack-dashboard-demo
Live Demo: https://tanstack-dashboard-demo.vercel.app/dashboard

Feel free to clone, experiment, and extend it to fit your own application needs!

Summary

Congratulations! You've built a complete, production-ready admin dashboard using TanStack Start, TanStack Table, TanStack Query, Shadcn/ui, and shadcn/studio.

Throughout this tutorial, you’ve gained some hands-on experience in:

Full-stack application development with type safety: We’ve developed a full-stack application with TanStack Start's server functions with Zod validation to create type-safe APIs.
Advanced data fetching: We’ve implemented TanStack Query for data fetching with automatic caching and background updates.
Complex table interactions: We’ve built feature-rich data tables with TanStack Table, including server-side pagination, sorting, and filtering.
Building UI quicker: We’ve leveraged shadcn/ui and shadcn/studio blocks to quickly build polished interfaces.
Responsive layouts: And we’ve created adaptive designs that work seamlessly from mobile to desktop

What’s Next?

Now that you have a solid foundation, consider implementing some or all of the below features if you want to work more on this:

Authentication: Add user authentication with Clerk, NextAuth, or Auth.js
Real database: Replace mock data with Prisma + PostgreSQL or Drizzle + SQLite
Form validation: Integrate React Hook Form with Zod for robust form handling
Theming: Implement dark mode and custom color schemes using shadcn/ui's theming system
API routes for CRUD: Add CRUD operations for products (create, update, delete)
Internationalization: Make the dashboard compatible with multiple languages by integrating internationalization.

We shipped a scalable and production-ready dashboard much faster than starting from scratch. Hope you enjoyed the process – and thanks for reading!

Resources:

How to Build a CRUD App with TanStack Start and TanStackDB (with RxDB Integration)

Andrew Baisden — Mon, 27 Oct 2025 21:08:27 +0000

TanStack Start is a new full-stack framework for React. It’s been growing in popularity ever since it reached the Release Candidate stage of its development in September, 2025. The Release Candidate stage is basically a version of software which is considered to be almost complete, in a stable state, and ready for final public testing before its official launch.

TanStack Start has already started to emerge as a good alternative to other popular React frameworks like Next.js and Remix. The TanStack ecosystem is already quite popular with developers, and other well-known tools include:

TanStack Router: Type-safe Routing for React and Solid applications
TanStack Query: Powerful asynchronous state management, server-state utilities and data fetching
TanStack Form: Headless UI for building performant and type-safe forms
TanStackDB: A reactive client store for building super-fast apps on sync

In this tutorial, we’ll build a simple but powerful to-do list CRUD application using TanStack Start, TanStackDB, and RxDB. You can see what the app looks like below:

The tutorial will teach you how to:

Create and persist data locally using RxDB
Create a TanStack Start project that uses TanStackDB for data storage
Build a full CRUD (Create, Read, Update, Delete) app

At the end of this guide, we are also going to look at what makes TanStack Start different from other React frameworks like Next.js and Remix and how TanStackDB fits into this ever-growing ecosystem.

Let's get started.

What is TanStack Start?
What is TanStack DB (with RxDB Integration)?
Setting Up Our Project
Creating the Database Client
Understanding Local Persistence with RxDB
Creating a Todo Collection
Creating Our CRUD Actions
Creating the Frontend Page
How does TanStack Start Compare to Next.js and Remix?
When Should You Use TanStack Start, Next.js, or Remix?
Conclusion

Prerequisites

Fortunately, not much is required – just the following:

Node and npm installed
Code editor/IDE

What is TanStack Start?

TanStack Start is a modern React-based meta-framework built by the developer Tanner Linsley (who’s famous for building the TanStack ecosystem).

TanStack Start is designed to be:

Blazing fast, as it is powered by Vite, Bun, or other modern bundlers
Type-safe, because it is deeply integrated with TypeScript as well as TanStack Router
Lightweight, since there is no server-side rendering unless you want it
Full-stack ready, as it works with loaders, actions, and data mutations just like Remix

If you’re already familiar with Next.js and Remix, you can think of TanStack Start as a more modular, transparent, and flexible way of building full-stack React apps.

What is TanStack DB (with RxDB Integration)?

TanStackDB is a reactive data management layer which sits between your user interface and data source. It’s not like a typical ORM (Object Relational Mapper). Instead, it gives you a unified abstraction layer for working with local-first data collections which are reactive.

So when you combine TanStackDB with RxDB, you get local database persistence which works by using IndexDB or SQLite and real-time reactivity. This gives you the ability to sync data to remote backends later like PostgreSQL, for example.

In this project, we’re going to use RxDB for local-first-storage that makes it behave like SQLite when it’s inside a browser.

Setting Up Our Project

Let’s start fresh. Find a location on your computer for creating this project and run these commands in your terminal to set it up:

npm create @tanstack/start@latest my-app
cd my-app
npm install rxdb @tanstack/react-db @tanstack/rxdb-db-collection
mkdir -p src/db
touch src/db/actions.ts src/db/client.ts src/db/todoCollection.ts

This run script creates a TanStack Start project, installs dependencies for RxDB and TanStackDB, and creates the folders and files we need for our app.

At the end, we’re also going to replace the existing index.tsx page with our own CRUD app codebase, while also keeping the demo routes in navigation so you can still explore them.

Creating the Database Client

Up first is our src/db/client.ts file, so copy and paste the below code into the file:

import { createRxDatabase, removeRxDatabase } from "rxdb";
import { getRxStorageDexie } from "rxdb/plugins/storage-dexie";

let dbInstance: any = null;

export async function initDB() {
  // Only initialize in browser environment
  if (typeof window === "undefined") {
    console.log("initDB: Not in browser, skipping");
    return null;
  }

  if (dbInstance) {
    console.log("initDB: Returning existing instance");
    return dbInstance;
  }

  try {
    console.log("initDB: Creating new database instance");
    const storage = getRxStorageDexie();

    // Always remove existing database in development
    if (import.meta.env.DEV) {
      try {
        console.log("initDB: Removing existing database (dev mode)");
        await removeRxDatabase("appdb", storage);
      } catch (e) {
        console.log("initDB: No existing database to remove");
      }
    }

    dbInstance = await createRxDatabase({
      name: "appdb",
      storage,
      multiInstance: false,
      eventReduce: true,
    });

    console.log("initDB: Database created successfully");
    return dbInstance;
  } catch (error) {
    console.error("initDB: Failed to create database", error);
    throw error;
  }
}

// Cleanup for HMR
if (typeof window !== "undefined" && import.meta.hot) {
  import.meta.hot.dispose(async () => {
    console.log("HMR: Disposing database");
    if (dbInstance) {
      await dbInstance.destroy();
      dbInstance = null;
    }
  });
}

This code uses RxDB to create a client-side database which is appdb. We use the function getRxStorageDexie() to provide IndexDB storage when used in browsers.

In dev mode, we can clear the DB on each reload, giving us a clean state. Server-side execution is protected by using the window check. HMR cleanup guarantees that the DB is reset properly when hot reloading.

Understanding Local Persistence with RxDB

Before we move to the next section, lets go over the concept of local persistence with RxDB. Our data is likely to disappear when the page is reloaded during development because RxDB used a browser-based database engine for persisting data locally. So we’ll be using the Dexie storage adapter which stores all of our apps data inside a browser’s IndexedDB.

So basically, this means that our todos actually don’t persist in the browser, even if we close and reopen the app – but there’s a way to get this working in our app.

In the src/db/client.ts file, there just happens to be a section of code that looks like this:

    if (import.meta.env.DEV) {
      try {
        console.log("initDB: Removing existing database (dev mode)");
        await removeRxDatabase("appdb", storage);
      } catch (e) {
        console.log("initDB: No existing database to remove");
      }
    }

This code is making sure that when we’re in development mode, our database is removed and then recreated every time the app is reloaded. This is quite useful, because when we’re actively developing and changing schemas, it can guarantee that old data is not going to conflict with new database structures.

The downside, though, is that todos will disappear every time the page is refreshed. This behaviour is expected while running our app locally in dev mode. If you want todos to persist between reloads, then all you have to do is comment out this code block:

// Comment or remove this code block to persist data across reloads
   if (import.meta.env.DEV) {
      try {
        console.log("initDB: Removing existing database (dev mode)");
        await removeRxDatabase("appdb", storage);
      } catch (e) {
        console.log("initDB: No existing database to remove");
      }
    }

After making this update, RxDB will now store your todos in IndexedDB and they will be automatically loaded whenever you revisit the app. You can even see this for yourself by opening your browser while the app is running and navigating to DevTools -> Application -> IndexedDB -> appdb.

See the examples shown here:

Here you can see an example of what our app looks like with some tasks:

Here, you can see that our data stored inside IndexedDB in our browser.

The tasks should remain there until you have manually cleared the browser data.

Creating a Todo Collection

Now, let's work on our src/db/todoCollection.ts file. Copy and paste this code into the empty file in the codebase:

import { initDB } from "./client";

let todoCollectionInstance: any = null;

export async function createTodoCollection() {
  // Protect against server-side execution
  if (typeof window === "undefined") {
    console.log("createTodoCollection: Not in browser, skipping");
    return null;
  }

  if (todoCollectionInstance) {
    console.log("createTodoCollection: Returning existing collection");
    return todoCollectionInstance;
  }

  try {
    console.log("createTodoCollection: Initializing database");
    const db = await initDB();

    if (!db) {
      console.error(
        "createTodoCollection: Database initialization returned null",
      );
      return null;
    }

    console.log("createTodoCollection: Adding collections");
    if (!db.todos) {
      await db.addCollections({
        todos: {
          schema: {
            version: 0,
            primaryKey: "id",
            type: "object",
            properties: {
              id: {
                type: "string",
                maxLength: 100,
              },
              title: {
                type: "string",
              },
              completed: {
                type: "boolean",
              },
            },
            required: ["id", "title", "completed"],
          },
        },
      });
      console.log("createTodoCollection: Collections added successfully");
    }

    // Return the RxDB collection directly
    todoCollectionInstance = db.todos;

    console.log("createTodoCollection: Collection created successfully");
    return todoCollectionInstance;
  } catch (error) {
    console.error("createTodoCollection: Failed to create collection", error);
    throw error;
  }
}

With this file, we define a todos collection schema which has an id, title, and completed fields. This schema is able to ensure that the structure and validation is correct, and we memoize the collection instance which prevents multiple DB connections from occurring. The code then returns a live RxDB collection which is ready for querying and mutation.

Creating Our CRUD Actions

It’s now time to work on our CRUD actions. These allow us to perform the usual updates/changes to the data in our todo list.

Open the src/db/actions.ts file and copy and paste this code into it:

import { createTodoCollection } from "./todoCollection";

let collectionPromise: Promise<any> | null = null;

async function getCollection() {
  if (typeof window === "undefined") {
    return null;
  }

  if (!collectionPromise) {
    collectionPromise = createTodoCollection();
  }
  return collectionPromise;
}

export const TodoActions = {
  async getAll() {
    try {
      const collection = await getCollection();
      if (!collection) return [];

      const docs = await collection.find().exec();
      return docs.map((doc: any) => ({
        id: doc.id,
        title: doc.title,
        completed: doc.completed,
      }));
    } catch (error) {
      console.error("TodoActions.getAll error:", error);
      throw error;
    }
  },

  async add(title: string) {
    const collection = await getCollection();
    if (!collection) throw new Error("Collection not initialized");

    await collection.insert({
      id: crypto.randomUUID(),
      title,
      completed: false,
    });
  },

  async update(
    id: string,
    changes: Partial<{ title: string; completed: boolean }>
  ) {
    const collection = await getCollection();
    if (!collection) throw new Error("Collection not initialized");

    const doc = await collection.findOne(id).exec();
    if (doc) {
      const patch: any = {};
      if (typeof changes.title !== "undefined") patch.title = changes.title;
      if (typeof changes.completed !== "undefined")
        patch.completed = changes.completed;
      if (Object.keys(patch).length > 0) {
        await doc.patch(patch);
      }
    }
  },

  async toggle(id: string) {
    const collection = await getCollection();
    if (!collection) throw new Error("Collection not initialized");

    const doc = await collection.findOne(id).exec();
    if (doc) {
      await doc.patch({ completed: !doc.completed });
    }
  },

  async remove(id: string) {
    const collection = await getCollection();
    if (!collection) throw new Error("Collection not initialized");

    const doc = await collection.findOne(id).exec();
    if (doc) {
      await doc.remove();
    }
  },
};

With this code, we use the getCollection() function to ensure that we only initialise the collection once. Each CRUD method (getAll, add, toggle, remove) interacts directly with RxDB and the methods use the native browser crypto.randomUUID() to generate a unique ID. We can now safely handle server-side rendering, as we skip DB access on the server using this strategy.

Creating the Frontend Page

All that remains is the frontend user interface, as we’ve written the bulk of the logic already. We’re going to replace the default src/routes/index.tsx file with our own CRUD UI, so just replace all of the code in that file with this code here:

import * as React from "react";
import { createFileRoute } from "@tanstack/react-router";
import { TodoActions } from "../db/actions";

function Index() {
  const [todos, setTodos] = React.useState<
    Array<{ id: string; title: string; completed: boolean }>
  >([]);
  const [title, setTitle] = React.useState("");
  const [isLoading, setIsLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [editingId, setEditingId] = React.useState(null);
  const [editingTitle, setEditingTitle] = React.useState("");

  React.useEffect(() => {
    let active = true;

    (async () => {
      try {
        console.log("Index: Loading todos");
        const data = await TodoActions.getAll();
        console.log("Index: Todos loaded", data);
        if (active) {
          setTodos(data);
          setIsLoading(false);
        }
      } catch (err) {
        console.error("Index: Failed to load todos:", err);
        if (active) {
          setError(err as Error);
          setIsLoading(false);
        }
      }
    })();

    return () => {
      active = false;
    };
  }, []);

  const handleAdd = async (e: React.FormEvent) => {
    e.preventDefault();
    if (title.trim()) {
      try {
        await TodoActions.add(title);
        setTodos(await TodoActions.getAll());
        setTitle("");
      } catch (err) {
        console.error("Failed to add todo:", err);
        setError(err as Error);
      }
    }
  };

  const handleToggle = async (id: string) => {
    try {
      await TodoActions.toggle(id);
      setTodos(await TodoActions.getAll());
    } catch (err) {
      console.error("Failed to toggle todo:", err);
    }
  };

  const handleRemove = async (id: string) => {
    try {
      await TodoActions.remove(id);
      setTodos(await TodoActions.getAll());
    } catch (err) {
      console.error("Failed to remove todo:", err);
    }
  };

  const startEdit = (todo: { id: string; title: string }) => {
    setEditingId(todo.id);
    setEditingTitle(todo.title);
  };

  const cancelEdit = () => {
    setEditingId(null);
    setEditingTitle("");
  };

  const saveEdit = async () => {
    if (!editingId) return;
    const newTitle = editingTitle.trim();
    if (!newTitle) return;
    try {
      await TodoActions.update(editingId, { title: newTitle });
      setTodos(await TodoActions.getAll());
      setEditingId(null);
      setEditingTitle("");
    } catch (err) {
      console.error("Failed to update todo:", err);
    }
  };

  if (isLoading) {
    return (
      
        Loading database...
      
    );
  }

  if (error) {
    return (
      
        
          Error: 
          {error.message}
          
            Show details
            {error.stack}
          
        
      
    );
  }

  return (
    
      TanStack CRUD (RxDB)

      
         setTitle(e.target.value)}
          placeholder="Add a new task"
          className="border rounded px-3 py-2 flex-1"
        />
        
      

      
        {todos.length === 0 ? (
          No todos yet
        ) : (
          todos.map((todo) => (
            
              {editingId === todo.id ? (
                
                   setEditingTitle(e.target.value)}
                    className="border rounded px-2 py-1 flex-1"
                  />
                  
                  
                
              ) : (
                <>
                   handleToggle(todo.id)}
                    className={
                      todo.completed
                        ? "line-through cursor-pointer"
                        : "cursor-pointer"
                    }
                  >
                    {todo.title}
                  
                  
                    
                    
                  
                
              )}
            
          ))
        )}
      
    
  );
}

export const Route = createFileRoute("/")({
  component: Index,
});

Our updated index.tsx file uses TanStack Router to define our root page, and we have React hooks to handle state, error handling, and the CRUD updates.

Our frontend is set up to show loading/error states for a much smoother UX, and each button triggers a corresponding TodoActions method. The result is that we have a fully reactive, local CRUD app.

That's all there is to it. To run the app, use the usual run command for a Vite application:

npm run dev

How Does TanStack Start Compare to Next.js and Remix?

TanStack Start seems pretty impressive, right? But lets see how it compares to the other two big established frameworks, Next.js and Remix.

Next.js recently released version 16, which brought some new improvements and features which you can read about. It’s without a doubt the most well known and used React framework available right now.

Remix also has a lot going for it, recently held its Remix Jam 2025 recap event which you can also read and learn about.

TanStack Start, on the other hand, is built using the popular Vite build tool which it uses for its development, workflow, and production builds alongside TanStack Router and other libraries.

This is how all three compare when we put them side by side in a table:

Feature	TanStack Start	Next.js	Remix
Routing	TanStack Router	File-based	Nested routes
Type Safety	Deep TS integration	Partial	Full
Data Loading	Loaders/Actions	Server Components	Loaders/Actions
SSR Support	Optional	Built-in	Built-in
Bundler	Vite / Bun	Webpack / Turbopack	Remix Compiler
DX	Simple, minimal	Full-stack ecosystem	Full-stack with conventions

As you can see, TanStack Start offers quite a lot of flexibility. It doesn’t force conventions like Next.js or Remix because of its design and it has just the right amount of structure for developers who want control and transparency in their projects. All three are great options, though.

When Should You Use TanStack Start, Next.js, or Remix?

Each of these frameworks has its advantages and disadvantages depending on your projects setup and priorities. We have to take into account the performance, flexibility, ecosystem as well as the developer experience.

With all of this in mind, it paints a clearer picture on when its best to use them.

When to use TanStack Start

If you want full control of your architecture without having to be locked into conventions, then TanStack Start is a great choice. It’s ideal if you value having transparency alongside the flexibility that comes from it.

You’ll find that its pretty useful especially in projects which need fine-grained control over routing, data fetching, and caching – without having to worry about the overhead of a large opinionated framework.

The integration between Vite and TanStack Router makes it a lightweight and blazing fast tool which can be great for greenfield projects and teams that want to have a modular setup.

When to use Next.js

Next.js is a great option when you need to have a production-ready scalability and extensive documentation, with a very large ecosystem. The framework has been a go to for startups as well as enterprises because of its tight integration with React Server Components, hosting with Vercel, and community driven packages.

So if SEO, SSR, or hybrid rendering are part of your team’s core needs, or if you want to shop something fast with a proven foundation, then Next.js is the safest and most mature way to go about doing it.

When to use Remix.js

Remix is a great choice when you want to have a strong focus on web fundamentals, progressive enhancement, and a reliable UX. It’s good for applications where you want to use a browser’s native capabilities such as forms, caching, and accessibility while also benefitting from a modern full-stack workflow.

It's also great for teams that want to have the simplicity of conventional routing and loaders while also remaining close to the original platform.

Conclusion

In this article, we built a CRUD app from scratch using:

TanStack Start for the app structure and routing
TanStackDB for the reactive data management
RxDB for an offline-first experience and local persistence

You learned how to initialise a local database and collections as well as perform CRUD operations safely.

The TanStack ecosystem is quite powerful, and there are many tools available. They all fit really well together to give you a next-gen, local-first, reactive web development experience. TanStack Start is likely to become one of your favourite ways for building React applications and has a lot of potential for growth.

The official TanStack demos are still available in your nav on the homepage, and they are well worth checking out. Give the TanStack ecosystem a try. I think it could easily become your main tech stack.

tanstack - freeCodeCamp.org

How to Build an Admin Dashboard with shadcn/ui and TanStack Start

Table of Contents

Prerequisites

What we will build

Why TanStack Start?

Why shadcn/ui?

How to Build the Admin Dashboard Using shadcn/ui and TanStack Start

1. Create a new TanStack app

2. Initial Cleanup

3. Setting Up shadcn/studio Blocks

What is shadcn/studio?

What is Shadcn Registry?

Install the Dashboard Shell Block

4. Routing Structure for the Dashboard

5. Creating the /dashboard Layout

6. Building the Dashboard Home Page

7. Set up the Products Page.

Why Zod?

Creating Mock Product Data

Create the Products table:

"text-2xl font-bold tracking-tight">Products

How do TanStack Query and TanStack Table Work in the products table?

8. Settings Page

"text-lg font-medium">Settings

Live Demo & Source Code

Summary

What’s Next?

Resources:

How to Build a CRUD App with TanStack Start and TanStackDB (with RxDB Integration)

Table of Contents

Prerequisites

What is TanStack Start?

What is TanStack DB (with RxDB Integration)?

Setting Up Our Project

Creating the Database Client

Understanding Local Persistence with RxDB

Creating a Todo Collection

Creating Our CRUD Actions

Creating the Frontend Page

TanStack CRUD (RxDB)

How Does TanStack Start Compare to Next.js and Remix?

When Should You Use TanStack Start, Next.js, or Remix?

When to use TanStack Start

When to use Next.js

When to use Remix.js

Conclusion

5. Creating the `/dashboard` Layout