Starter

Next.js 16 starter

Ship consistent sites, fast.

Server components, cached pages, staggered reveals, and a token-driven contrast system — all wired up before you write a line.

Get startedSee the system
  • Production-grade defaults
  • Tokens, never hardcoded colours
  • Deploys straight to Vercel

use cache

Static pages cached whole; fresh data streams via Suspense.

Next 16

<Stagger as='ul'>

Scroll reveals on semantic HTML, zero wrappers.

Motion

Server actions

Typed useActionState forms, colocated per route.

Next 16

OverlapCta

A primary card straddling the seam between bands.

Blocks

use cache

Static pages cached whole; fresh data streams via Suspense.

Next 16

<Stagger as='ul'>

Scroll reveals on semantic HTML, zero wrappers.

Motion

Server actions

Typed useActionState forms, colocated per route.

Next 16

OverlapCta

A primary card straddling the seam between bands.

Blocks

contrast-on

One class flips every token in the subtree.

Tokens

Floating fields

Input, Textarea, Select with the peer-label pattern.

Forms

Blocks & cards

Prop-driven sections; copy lives only in data/.

System

@mrbrandme registry

shadcn add @mrbrandme/hero-marquee — like this one.

Registry

contrast-on

One class flips every token in the subtree.

Tokens

Floating fields

Input, Textarea, Select with the peer-label pattern.

Forms

Blocks & cards

Prop-driven sections; copy lives only in data/.

System

@mrbrandme registry

shadcn add @mrbrandme/hero-marquee — like this one.

Registry

The system

Everything is a token, a block, or a card.

No hardcoded colours, no one-off headings, no client pages. The primitives do the work.

  • Contrast system
    Add .contrast-on to any block and every token below it flips. No dark: overrides scattered through the tree.
  • Stagger reveals
    One <Stagger as='ul'> primitive animates children in on scroll — semantic HTML, zero wrapper divs.
  • Blocks & cards
    Pages compose prop-driven blocks; blocks compose cards and primitives. Copy lives in data/, never in components.

Composition

Copy one side, media the other.

The Split block takes a media slot and a mediaSide prop. Same Header, same Stagger, zero new patterns.

See the blocks

Blocks can overlap.

This card straddles the seam between two bands — bgTop and bgBottom match the neighbouring blocks.

Start a project

Get started

Clone it, retheme it, ship it.

Swap the tokens in globals.css and the copy in data/ — the system holds.

Start a project