The Ultimate Start Kit Boilerplate
An open-source, production-ready template featuring Authentication, Payments, Database, i18n, and more. Built with Start Kit, React 19, and Tailwind v4.
Modern Tech Stack
Driven by the best tools in the ecosystem.
Make It Yours
Customize colors, radius, and fonts with our live theme editor. Preview changes in real-time, then copy the CSS or share your theme via URL.
AI, Built In
Powered by AI SDK + AI Elements for streaming chat UIs, tool calling, and agentic workflows.
import { convertToModelMessages, streamText, type UIMessage } from "ai";import { openai } from "@ai-sdk/openai";import { anthropic } from "@ai-sdk/anthropic";import { google } from "@ai-sdk/google";import { createFileRoute } from "@tanstack/react-router";
type Provider = "openai" | "anthropic" | "gemini";
function getModel(provider: Provider, modelId: string) { switch (provider) { case "anthropic": return anthropic(modelId); case "gemini": return google(modelId); default: return openai(modelId); }}
export const Route = createFileRoute("/api/chat/")({ server: { handlers: { POST: async ({ request }) => { const { messages, provider = "openai", model = "gpt-5-mini" } = await request.json() as { messages: UIMessage[]; provider?: Provider; model?: string };
const result = streamText({ model: getModel(provider, model), messages: await convertToModelMessages(messages), });
return result.toUIMessageStreamResponse(); }, }, },});Authentication, Done Right
Better Auth with first-class TanStack Start support: sessions, orgs, passkeys, 2FA, and more—ready to extend.
import { createMiddleware, createServerFn } from "@tanstack/react-start";import { auth } from "@/lib/auth/auth";
export const authMiddleware = createMiddleware().server( async ({ next, request }) => { const session = await auth.api.getSession({ headers: request.headers }); return next({ context: { session } }); });
export const getCurrentUserFn = createServerFn({ method: "GET" }) .middleware([authMiddleware]) .handler(async ({ context }) => context.session);Type-Safe APIs with oRPC
End-to-end type safety from server procedures to client queries, with TanStack Query utilities baked in.
import { ORPCError, os } from "@orpc/server";import { auth } from "@/lib/auth/auth";import { db } from "@/lib/db";
export const createORPCContext = async ({ headers }: { headers: Headers }) => { const session = await auth.api.getSession({ headers }); return { db, session };};
export const orpc = os.$context<Awaited<ReturnType<typeof createORPCContext>>>();
export const protectedProcedure = orpc.middleware(async ({ context, next }) => { if (!context.session?.user) throw new ORPCError("UNAUTHORIZED"); return await next();});Universal Object Storage
Manage your files with ease across any S3-compatible provider. Built-in support for presigned URLs and organization-level isolation.
import { S3Client } from "bun";import { env } from "@/lib/env.server";
const s3 = new S3Client({ accessKeyId: env.S3_ACCESS_KEY_ID, secretAccessKey: env.S3_SECRET_ACCESS_KEY, bucket: env.S3_BUCKET?.toLowerCase(), region: env.S3_REGION, endpoint: env.S3_ENDPOINT,});
export const storage = { async upload(key: string, data: Uint8Array, contentType?: string) { await s3.file(key).write(data, { type: contentType }); return { key, size: data.length, contentType }; },};Type-Safe Database Management
Drizzle ORM provides a thin, high-performance layer over Postgres with full TypeScript safety and sub-millisecond query execution.
import { relations } from "drizzle-orm";import { bigint, index, json, pgTable, text, timestamp } from "drizzle-orm/pg-core";
export const file = pgTable( "file", { id: text("id").primaryKey(), key: text("key").notNull().unique(), provider: text("provider").notNull(), size: bigint("size", { mode: "number" }).notNull(), mimeType: text("mime_type").notNull(), fileName: text("file_name").notNull(), metadata: json("metadata").$type<Record<string, unknown>>(), createdAt: timestamp("created_at").defaultNow().notNull(), }, (table) => [index("file_key_idx").on(table.key)]);
export const fileRelations = relations(file, ({ one }) => ({ user: one(/* ... */),}));Server State that Just Works
TanStack Query for caching, retries, mutations, and background refetching—clean hooks and predictable data flow.
import { queryOptions } from "@tanstack/react-query";
export const repoStarsOptions = queryOptions({ queryKey: ["repo", "tanstack-query"], queryFn: async () => { const res = await fetch("https://api.github.com/repos/tanstack/query"); if (!res.ok) throw new Error("Request failed"); return await res.json() as { stargazers_count: number }; }, staleTime: 60_000,});Everything you need to ship.
A comprehensive ecosystem designed for developers who don't want to compromise on quality or speed.
Designed for Developer Happiness
We've combined the power of Start Kit with a meticulously crafted developer experience. Focus on building your features while we handle the boilerplate, type-safety, and performance.
How it Works
Clone & Configure
Clone the repo, set up your .env, and you're ready to go in minutes.
Build & Deploy
Customize your logic and deploy to Vercel or any Bun-compliant host.
Scale Automatically
With built-in S3 and optimized DB queries, your app is ready for growth.
Frequently Asked Questions
Love this template?
Supporting open source helps us keep improving. Give it a star or buy us a coffee!