Tanstarter

React TanStarter: Minimal TanStack Start Template with Auth, ORM & UI

React TanStarter is a minimal starter template designed to accelerate development with TanStack Start. It integrates cutting-edge technologies like React 19 with its new compiler, TanStack's full suite (Start, Router, Query), Tailwind CSS v4 for styling, and the popular shadcn/ui component library. For backend and data management, it includes Drizzle ORM with PostgreSQL support and Better Auth for robust authentication, providing a solid foundation for your next project.

Features:

• React 19 & Compiler: Utilizes the latest React version with its new compiler for optimized performance.
• TanStack Start (Alpha): Built on the alpha branch of TanStack Start for modern web application structure.
• TanStack Router (Alpha): Integrates TanStack Router for robust client-side and server-side routing.
• TanStack Query: Leverages TanStack Query for efficient data fetching and server state management.
• Tailwind CSS v4: Employs the latest Tailwind CSS for utility-first styling.
• shadcn/ui Integration: Comes with shadcn/ui for easily adding customizable UI components.
• Drizzle ORM for PostgreSQL: Features Drizzle ORM for type-safe SQL interactions, pre-configured for PostgreSQL.
• Better Auth Integration: Implements Better Auth for comprehensive authentication solutions.
• Environment Variable Setup: Uses .env files for straightforward configuration based on an example.
• Database Schema Push: Provides pnpm db push for easy database schema updates with Drizzle Kit.
• Auth Schema Regeneration Script: Includes an auth:generate script to update the Better Auth database schema based on configuration changes.
• Drizzle Kit CLI Script: Offers a db script alias for conveniently running Drizzle Kit commands.
• shadcn/ui CLI Script: Provides a ui script alias for easily adding shadcn/ui components.
• Auth Guard Middleware Example: Includes auth-guard.ts as a sample middleware for protecting server functions.
• Theme Toggle Component: Provides a ThemeToggle.tsx component for switching between light and dark modes.

Summary:

React TanStarter offers developers a streamlined starting point for building full-stack applications using TanStack Start. It bundles essential tools like React 19, Drizzle ORM for database management, Better Auth for secure authentication, and shadcn/ui for a rich component library, all configured to work together seamlessly. This template accelerates setup, allowing developers to focus on building features rather than boilerplate code, with the latest tooling for a modern development experience.