Using GliaKit

Unzip (or clone) the boilerplate, install, and run. No keys, no config, no database required:

npm install
npm run dev

Open http://localhost:3000 — the landing page, /dashboard, and all fifteen screens run on typed demo data from src/lib/data.ts.

Landing · Pricing · Sign in · Sign up · Reset password · Dashboard · Customers · Customer detail · Billing · Analytics · Inbox · Settings (Profile / Team / Notifications) · 404.

Every screen is routed with the App Router and styled from the same tokens. List screens follow /customers, detail screens follow /customers/[id], tabbed screens follow /settings — copy the nearest pattern when adding your own.

Copy .env.example to .env and add keys. Each key activates its integration on restart — the feature flags live in src/lib/env.ts:

Miss a key? Nothing breaks — the app keeps running on demo data and the service’s client throws a helpful message only if you call it directly.

src/
├── app/
│   ├── (app)/          # dashboard shell — 11 wired screens
│   ├── (auth)/         # sign-in, sign-up, reset
│   └── globals.css     # every design token lives here
├── components/
│   ├── ui/             # primitives — Button, Card, Table, Chart…
│   └── app/            # shell — Sidebar, PageHeader, ThemeToggle
├── lib/
│   ├── data.ts         # typed demo data for every screen
│   └── env.ts          # feature flags from env presence
├── prisma/             # schema + seed
├── prompts/            # fill-in prompts for your AI tools
└── .cursor/rules/      # the rules Cursor reads automatically

The starter ships with rules files your AI tools read before writing a line:

• .cursor/rules/design-system.mdc — tokens, typography, component law
• .cursor/rules/screens.mdc — how screens are composed
• CLAUDE.md / AGENTS.md — the same system for Claude Code and other agents
• prompts/ — fill-in-the-brackets prompts for new screens and CRUD tables

Try it: paste prompts/new-screen.md into Cursor or Claude Code with your own screen idea. The result lands on-system — same tokens, same components, no cleanup pass.

• Colors: semantic tokens only — bg-background, bg-card, text-foreground, text-muted-foreground, border-border, bg-primary. Never hex in components.
• Type: headings are Bricolage Grotesque (font-heading), body is Geist, labels and numbers are JetBrains Mono (font-mono).
• Structure: hairline borders, not shadows. Cards are rounded-xl border bg-card; buttons and pills are fully rounded.
• The gradient (violet → cyan) is reserved for one hero keyword, the gradient button variant, and signal dividers. Nothing else.
• Theming: dark is default; because everything uses semantic tokens, light mode is free via next-themes.

The companion Figma file mirrors the code 1:1 — the same variables (with web code syntax on every token), the same components with variants, and the same fifteen screens in light and dark. Design in Figma, build in code, and nothing drifts — your AI tools reference the system instead of regenerating it.