Headless React

This boilerplate gives you a complete foundation for building CMS-driven React applications. It's designed to stay out of your way — swap the CMS, extend the design system, and ship with confidence.

What's included

1. React Router v7 — Framework mode with full SSR. Data loads server-side on every request — no client waterfalls, no loading spinners on first paint.

2. TypeScript strict mode — Component prop contracts drive CMS schemas, not the other way around. Design front-to-back.

3. Tailwind CSS v4 — Custom variants for dark mode, compact mode, contained layout, radius scale, and more — all toggled via html class flags with zero JavaScript overhead.

4. Sanity CMS — Wired through a DataSource interface. Switch to any headless CMS by implementing a single interface — no changes to components or routes.

5. Theme system — Dark mode, accent colors, text size, compact mode, reading mode, and more. Preferences persisted to cookies with an SSR-safe no-flash strategy.

6. Component architecture — Three-layer hierarchy (primitives → blocks → sections) with hard boundaries. Sections are the only layer editors ever interact with.

Adding a section in four steps

1. Define the interface in types.ts
2. Create the component in components/sections/
3. Register it in sectionMap
4. Add data to your CMS or stub.json

The GROQ query and ComponentRenderer pick it up automatically.