Technical Details of the Tanstack Start Supabase SaaS Starter Kit

Tech stack overview: Tanstack Start, React 19, Supabase, Tailwind CSS 4, Turborepo monorepo with TypeScript, Shadcn UI, and Zod.

The kit is built as a Turborepo monorepo using these core technologies:

TechnologyVersionPurpose
Tanstack StartLatestFile-based routing on Vite
React19UI framework
SupabaseLatestDatabase, Auth, Storage
ViteLatestBuild tool & dev server
Tailwind CSS4Styling
TypeScript5.9+Type safety
pnpm10.19+Package manager
Node.js20.10+Runtime (required)

Key Libraries

  • Shadcn UI (Base UI-based) for accessible UI components
  • React Query (@tanstack/react-query) for client-side data fetching
  • use-intl for internationalization with locale-prefixed URL routing
  • Zod for schema validation
  • Lucide for icons
  • react.email for email templates
  • Nodemailer or Resend for sending emails

The kit deploys to Vercel, Cloudflare, or any Node.js hosting. Edge runtime support enables deployment to Cloudflare Workers.

Monorepo Structure

Core Packages

PackageImportPurpose
@kit/ui@kit/ui/*Shadcn UI components and custom components
@kit/supabase@kit/supabase/*Supabase clients, types, and queries
@kit/shared@kit/shared/*Shared utilities and helpers
@kit/i18n@kit/i18n/*Internationalization utilities

Feature Packages

Located in packages/features/:

PackagePurpose
@kit/authAuthentication flows (Supabase Auth)
@kit/accountsPersonal account management
@kit/team-accountsTeam/organization management
@kit/adminSuper admin dashboard
@kit/notificationsIn-app notifications

Billing Packages

Located in packages/billing/:

PackagePurpose
@kit/billingCore billing logic and types
@kit/billing-gatewayPayment provider abstraction
@kit/stripeStripe integration

Infrastructure Packages

PackagePurpose
@kit/mailersEmail provider abstraction (Resend, Nodemailer, SendGrid)
@kit/email-templatesReact Email templates
@kit/monitoringError tracking (Sentry, Baselime)
@kit/analyticsUser behavior tracking
@kit/database-webhooksDatabase trigger handlers
@kit/cmsContent management abstraction
@kit/keystaticKeystatic CMS integration
@kit/wordpressWordPress headless CMS integration
@kit/policiesAuthorization policy helpers
@kit/otpOne-time password utilities

Application Configuration

Configuration files live in apps/web/src/config/:

FilePurpose
app.config.tsApp name, description, URLs
auth.config.tsAuth providers, redirect paths
billing.config.tsBilling provider, plans
feature-flags.config.tsFeature toggles
paths.config.tsRoute definitions
personal-account-navigation.config.tsxPersonal dashboard sidebar
team-account-navigation.config.tsxTeam dashboard sidebar