Boilerplates Hard

T3 Stack Starter (Next.js + tRPC + Prisma)

The T3 Stack — fully type-safe full-stack starter with Next.js, tRPC, Prisma/Drizzle, NextAuth, Tailwind, and validated environment variables.

Open in Lab

nextjs trpc prisma typescript tailwindcss

Targets: HTML

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>T3 Stack Starter</title>
  <style>
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      background: #0a0a0f;
      color: #e2e8f0;
      font-family: system-ui, -apple-system, sans-serif;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      padding: 2rem 1rem;
    }
    .card {
      width: 100%;
      max-width: 720px;
      background: linear-gradient(135deg, rgba(34,211,238,0.04) 0%, rgba(59,130,246,0.04) 100%);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      gap: 1.75rem;
    }
    .header { display: flex; align-items: center; gap: 1rem; }
    .icon-box {
      width: 48px; height: 48px;
      background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.25rem; font-weight: 700; color: #0a0a0f;
    }
    .header h1 { font-size: 1.35rem; font-weight: 700; color: #f1f5f9; }
    .header p { font-size: 0.8rem; color: #94a3b8; margin-top: 2px; }
    .badge {
      display: inline-block;
      background: rgba(234,179,8,0.15);
      color: #fbbf24;
      border: 1px solid rgba(234,179,8,0.25);
      border-radius: 4px;
      padding: 0.15rem 0.45rem;
      font-size: 0.6rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-left: 0.5rem;
      vertical-align: middle;
    }

    .section-title {
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #22d3ee;
      margin-bottom: 0.5rem;
    }

    /* Quick Start */
    .cmd-box {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px;
      padding: 0.75rem 1rem;
      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
      font-size: 0.82rem;
      color: #22d3ee;
      display: flex; align-items: center; gap: 0.5rem;
    }
    .cmd-prompt { color: #475569; user-select: none; }

    /* CLI Options */
    .options { display: flex; flex-direction: column; gap: 0.4rem; }
    .option {
      display: flex; align-items: center; gap: 0.6rem;
      padding: 0.5rem 0.85rem;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px;
      font-size: 0.78rem;
    }
    .option-check {
      width: 18px; height: 18px;
      border-radius: 4px;
      background: rgba(34,211,238,0.15);
      border: 1px solid rgba(34,211,238,0.3);
      display: flex; align-items: center; justify-content: center;
      color: #22d3ee;
      font-size: 0.7rem;
      font-weight: 700;
      flex-shrink: 0;
    }
    .option-name { color: #e2e8f0; font-weight: 600; }
    .option-desc { color: #64748b; font-size: 0.72rem; margin-left: auto; }

    /* Tree */
    .tree {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      padding: 1rem 1.25rem;
      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
      font-size: 0.75rem;
      line-height: 1.7;
      color: #94a3b8;
    }
    .tree .dir { color: #3b82f6; }
    .tree .highlight { color: #22d3ee; font-weight: 600; }
    .tree .file { color: #e2e8f0; }

    /* Type Flow */
    .flow-diagram {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.15rem;
      padding: 0.75rem 0;
      flex-wrap: wrap;
    }
    .flow-node {
      display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
      padding: 0.55rem 0.85rem;
      border-radius: 8px;
      min-width: 80px;
    }
    .flow-node.schema { background: rgba(139,92,246,0.15); border: 1px solid rgba(139,92,246,0.3); }
    .flow-node.server { background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.3); }
    .flow-node.client { background: rgba(34,211,238,0.15); border: 1px solid rgba(34,211,238,0.3); }
    .flow-node.ui { background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); }
    .flow-label {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.03em;
    }
    .flow-node.schema .flow-label { color: #a78bfa; }
    .flow-node.server .flow-label { color: #60a5fa; }
    .flow-node.client .flow-label { color: #22d3ee; }
    .flow-node.ui .flow-label { color: #34d399; }
    .flow-sub {
      font-size: 0.6rem;
      color: #64748b;
    }
    .flow-arrow {
      color: #475569;
      font-size: 1.1rem;
      flex-shrink: 0;
      margin: 0 0.15rem;
    }

    /* Links */
    .links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .link {
      display: inline-flex; align-items: center; gap: 0.35rem;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 6px;
      padding: 0.4rem 0.7rem;
      font-size: 0.7rem;
      color: #94a3b8;
      text-decoration: none;
      transition: border-color 0.2s, color 0.2s;
    }
    .link:hover { border-color: #22d3ee; color: #e2e8f0; }
    .link svg { width: 13px; height: 13px; flex-shrink: 0; }
  </style>
</head>
<body>
  <div class="card">

    <!-- Header -->
    <div class="header">
      <div class="icon-box">T3</div>
      <div>
        <h1>T3 Stack Starter <span class="badge">28.7k stars</span></h1>
        <p>Typesafety is not optional &mdash; Next.js + tRPC + Prisma</p>
      </div>
    </div>

    <!-- Quick Start -->
    <div>
      <div class="section-title">Quick Start</div>
      <div class="cmd-box">
        <span class="cmd-prompt">$</span> npm create t3-app@latest
      </div>
    </div>

    <!-- Interactive CLI Options -->
    <div>
      <div class="section-title">CLI Options</div>
      <div class="options">
        <div class="option">
          <span class="option-check">&check;</span>
          <span class="option-name">tRPC</span>
          <span class="option-desc">End-to-end typesafe API</span>
        </div>
        <div class="option">
          <span class="option-check">&check;</span>
          <span class="option-name">Prisma / Drizzle</span>
          <span class="option-desc">Typed ORM &amp; query builder</span>
        </div>
        <div class="option">
          <span class="option-check">&check;</span>
          <span class="option-name">NextAuth.js</span>
          <span class="option-desc">Authentication &amp; sessions</span>
        </div>
        <div class="option">
          <span class="option-check">&check;</span>
          <span class="option-name">Tailwind CSS</span>
          <span class="option-desc">Utility-first styling</span>
        </div>
      </div>
    </div>

    <!-- Generated Tree -->
    <div>
      <div class="section-title">Generated Structure</div>
      <div class="tree">
        <span class="dir">src/</span><br />
        &nbsp;&nbsp;<span class="dir">server/</span><br />
        &nbsp;&nbsp;&nbsp;&nbsp;<span class="dir">api/</span><br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">root.ts</span> &mdash; app router entrypoint<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="dir">routers/</span><br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="file">post.ts</span> &mdash; example CRUD router<br />
        &nbsp;&nbsp;&nbsp;&nbsp;<span class="file">db.ts</span> &mdash; Prisma/Drizzle client<br />
        &nbsp;&nbsp;<span class="dir">trpc/</span><br />
        &nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">react.tsx</span> &mdash; client-side tRPC hooks<br />
        &nbsp;&nbsp;&nbsp;&nbsp;<span class="file">server.ts</span> &mdash; server-side caller<br />
        <span class="dir">prisma/</span><br />
        &nbsp;&nbsp;<span class="file">schema.prisma</span><br />
        <span class="highlight">env.js</span> &mdash; Zod-validated env vars
      </div>
    </div>

    <!-- Type Safety Flow -->
    <div>
      <div class="section-title">Type Safety Flow</div>
      <div class="flow-diagram">
        <div class="flow-node schema">
          <span class="flow-label">Schema</span>
          <span class="flow-sub">Prisma / Drizzle</span>
        </div>
        <span class="flow-arrow">&rarr;</span>
        <div class="flow-node server">
          <span class="flow-label">Server</span>
          <span class="flow-sub">tRPC routers</span>
        </div>
        <span class="flow-arrow">&rarr;</span>
        <div class="flow-node client">
          <span class="flow-label">Client</span>
          <span class="flow-sub">tRPC hooks</span>
        </div>
        <span class="flow-arrow">&rarr;</span>
        <div class="flow-node ui">
          <span class="flow-label">UI</span>
          <span class="flow-sub">React components</span>
        </div>
      </div>
    </div>

    <!-- Source Links -->
    <div>
      <div class="section-title">Sources</div>
      <div class="links">
        <a class="link" href="https://create.t3.gg/" target="_blank" rel="noopener">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
          create.t3.gg
        </a>
        <a class="link" href="https://github.com/t3-oss/create-t3-app" target="_blank" rel="noopener">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
          t3-oss/create-t3-app
        </a>
      </div>
    </div>

  </div>
</body>
</html>

The T3 Stack is an opinionated full-stack starter built on the principle that typesafety is not optional. It wires together Next.js, tRPC, Prisma (or Drizzle), NextAuth.js, and Tailwind CSS into a cohesive, fully typed development experience.

Philosophy

T3 focuses on three axioms:

Solve problems — every included library addresses a specific full-stack pain point
Bleed responsibly — push the edge on new tech, but keep the core stable
Typesafety is not optional — end-to-end types from database to UI, enforced at build time

The Modular CLI

npm create t3-app@latest

The interactive CLI lets you pick only what you need. Every option is independently toggleable:

tRPC — end-to-end typesafe API layer (no codegen)
Prisma or Drizzle — typed ORM/query builder
NextAuth.js — authentication with session management
Tailwind CSS — utility-first styling

End-to-End Type Flow

The defining feature of T3 is that types flow automatically from your database schema through your API to your React components. When you change a Prisma model, the tRPC router types update, and any component consuming that data gets compile-time errors if the shape changed. No manual syncing. No runtime validation gaps.

The env.js module validates all environment variables at build time using Zod, so missing or malformed config is caught before deployment — not in production.

References

create.t3.gg — official documentation
t3-oss/create-t3-app (28.7k⭐)