# 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.

*Canonical: https://makerkit.dev/docs/tanstack-supabase/installation/technical-details*

---

The kit is built as a [Turborepo](https://turbo.build) monorepo using these core technologies:

| Technology | Version | Purpose |
|------------|---------|---------|
| Tanstack Start | Latest | File-based routing on Vite |
| React | 19 | UI framework |
| Supabase | Latest | Database, Auth, Storage |
| Vite | Latest | Build tool & dev server |
| Tailwind CSS | 4 | Styling |
| TypeScript | 5.9+ | Type safety |
| pnpm | 10.19+ | Package manager |
| Node.js | 20.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

| Package | Import | Purpose |
|---------|--------|---------|
| `@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/`:

| Package | Purpose |
|---------|---------|
| `@kit/auth` | Authentication flows (Supabase Auth) |
| `@kit/accounts` | Personal account management |
| `@kit/team-accounts` | Team/organization management |
| `@kit/admin` | Super admin dashboard |
| `@kit/notifications` | In-app notifications |

### Billing Packages

Located in `packages/billing/`:

| Package | Purpose |
|---------|---------|
| `@kit/billing` | Core billing logic and types |
| `@kit/billing-gateway` | Payment provider abstraction |
| `@kit/stripe` | Stripe integration |

### Infrastructure Packages

| Package | Purpose |
|---------|---------|
| `@kit/mailers` | Email provider abstraction (Resend, Nodemailer, SendGrid) |
| `@kit/email-templates` | React Email templates |
| `@kit/monitoring` | Error tracking (Sentry, Baselime) |
| `@kit/analytics` | User behavior tracking |
| `@kit/database-webhooks` | Database trigger handlers |
| `@kit/cms` | Content management abstraction |
| `@kit/keystatic` | Keystatic CMS integration |
| `@kit/wordpress` | WordPress headless CMS integration |
| `@kit/policies` | Authorization policy helpers |
| `@kit/otp` | One-time password utilities |

## Application Configuration

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

| File | Purpose |
|------|---------|
| `app.config.ts` | App name, description, URLs |
| `auth.config.ts` | Auth providers, redirect paths |
| `billing.config.ts` | Billing provider, plans |
| `feature-flags.config.ts` | Feature toggles |
| `paths.config.ts` | Route definitions |
| `navigation.config.tsx` | Main app sidebar |
| `components/settings/settings-navigation.tsx` | Settings sidebar |