A production-ready starter template for building React applications with Vite, TypeScript, Chakra UI v3, and TanStack Router. This template provides a modern development setup with file-based routing, state management, and comprehensive tooling.

Live Demo

This template solves the problem of quickly bootstrapping a new React application with:

• Modern build tooling (Vite with Rolldown)
• Type-safe routing (TanStack Router)
• Component library (Chakra UI v3)
• Development tooling (Biome, Vitest, TypeScript)
• PWA capabilities (optional, disabled by default)

What this template does not provide:

• Backend API integration patterns
• Authentication/authorization flows
• Database or data persistence layer
• Complex state management (beyond React Query)
• Deployment pipelines (only configuration files)

graph TB
    subgraph "Entry Point"
        A[index.html] --> B[main.tsx]
    end
    
    subgraph "Application Bootstrap"
        B --> C[Provider - Chakra UI Theme]
        C --> D[QueryClientProvider]
        D --> E[RouterProvider]
    end
    
    subgraph "Routing Layer"
        E --> F[__root.tsx - Layout Wrapper]
        F --> G[Route Tree - Auto-generated]
        G --> H[Page Components]
    end
    
    subgraph "Component Architecture"
        F --> I[Layout Component]
        I --> J[Header]
        I --> K[Footer]
        I --> L[Page Content]
        L --> M[UI Components]
        M --> N[Chakra UI Primitives]
    end
    
    subgraph "Supporting Systems"
        O[Theme System] --> C
        P[Color Mode Provider] --> C
        Q[Query Client] --> D
        R[Route Generation] --> G
    end
    
    style A fill:#e1f5ff
    style B fill:#e1f5ff
    style F fill:#fff4e1
    style I fill:#fff4e1
    style O fill:#e8f5e9
    style P fill:#e8f5e9

vite-react-chakra-starter/
├── src/
│   ├── main.tsx                 # Application entry point
│   ├── routes/                  # TanStack Router route definitions
│   │   ├── __root.tsx           # Root layout route with meta tags
│   │   └── index.tsx            # Home page route
│   ├── routeTree.gen.ts         # Auto-generated route tree (DO NOT EDIT)
│   └── lib/                     # Application code
│       ├── components/          # Reusable UI components
│       │   └── ui/              # Base UI components (button, color-mode, provider)
│       ├── layout/              # Layout components
│       │   ├── index.tsx        # Main layout wrapper
│       │   └── components/      # Header, Footer, Meta
│       ├── pages/               # Page-level components
│       │   ├── home/            # Home page and its components
│       │   └── 404/             # 404 error page
│       ├── services/            # Services and shared constants
│       │   └── constants.ts     # Query client instance
│       ├── styles/              # Theme configuration
│       │   └── theme/           # Chakra UI theme setup
│       └── utils/               # Utility functions
│           ├── sample.ts        # Example utility
│           └── sample.test.ts   # Example test
├── public/                      # Static assets
├── vite.config.ts               # Vite configuration
├── vitest.config.ts             # Test configuration
├── tsconfig.json                # TypeScript configuration
├── biome.json                   # Linting and formatting rules
└── package.json                 # Dependencies and scripts

• Node.js ^24.11.x
• pnpm 10.24.0

# Clone or use template
npx degit agustinusnathaniel/vite-react-chakra-starter <app_name>
cd <app_name>

# Install dependencies
pnpm install

# Start development server
pnpm dev

The development server runs on http://localhost:3000 and opens automatically.

# Development server with hot reload
pnpm dev

# Production build preview
pnpm build
pnpm serve

# Check code style and linting
pnpm biome:check

# Auto-fix issues
pnpm biome:fix

# Type checking
pnpm type:check

# Run all checks (lint, type, test)
pnpm check:turbo

# Run tests once
pnpm test

# Run tests with UI
pnpm test:ui

# Run tests with coverage
pnpm test:coverage

# Production build
pnpm build

# Output directory: build/client

• @tanstack/react-router: File-based routing with type safety. Routes are defined in src/routes/ and automatically generate a type-safe route tree.
• @tanstack/react-query: Server state management. Configured in src/lib/services/constants.ts.
• @chakra-ui/react: Component library with design tokens. Theme configured in src/lib/styles/theme/.

• @tanstack/router-plugin: Vite plugin that generates route trees and enables code splitting.
• @tanstack/devtools-vite: Development tools for debugging Router and Query.
• vite-plugin-checker: TypeScript type checking during development (disabled in production).
• vite-tsconfig-paths: Enables TypeScript path aliases (@/*) in Vite.

• rolldown-vite: Experimental Vite build using Rolldown (Rust-based bundler) for faster builds.
• vite-plugin-pwa: PWA support (currently disabled, see vite.config.ts).

The project uses TypeScript path aliases configured in tsconfig.json:

• @/* → src/*

Example: import { Button } from '@/lib/components/ui/button'

• Command: pnpm build
• Output Directory: build/client

• Vercel: vercel.json - React Router preset configuration
• Netlify: netlify.toml - React Router framework configuration
• Nixpacks: nixpacks.toml - Container build configuration

See platform-specific documentation:

• Vercel React Router Guide
• Netlify React Router Guide

1. Create a file in src/routes/ (e.g., src/routes/about.tsx)
2. Use createFileRoute to define the route
3. The route tree is auto-generated on save

import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/about')({
  component: About,
});

1. Create a directory in src/lib/pages/
2. Create index.tsx with the page component
3. Import and use in route file

1. Create component in src/lib/components/ui/ or appropriate subdirectory
2. Follow existing patterns (forwardRef for DOM components, proper TypeScript types)
3. Export from component file

Edit src/lib/styles/theme/index.ts to customize Chakra UI tokens, colors, and design system values.

• Vite Documentation
• Chakra UI Documentation
• TanStack Router Documentation
• TanStack Query Documentation
• TypeScript Documentation