A fictional product, built with real code.

What this is

A frontend building-block library organised as four levels of composition. Primitives read tokens; navigation and forms arrange primitives; sections arrange those; patterns and starters arrange sections. Nothing at a higher level re-implements something from a lower one.

The catalogue holds 240 items across 6 families, built on 87 tokens in 14 groups, and it renders 109 starter routes from 10 route tables.

What this is not

• Not a published package. There is no registry and no install command.
• Not a backend. There is no database, CMS, authentication or payment provider.
• Not a real company. Every name, quote, logo and figure in the content is fictional.
• Not certified. Accessibility patterns are implemented and tested, not audited.

How it is built

Next.js with the App Router, React 19, TypeScript and Tailwind v4, plus lucide-react for icons. That is the entire dependency list. There is no state library, no styling runtime, no animation library and no component library underneath — the primitives are the bottom of the stack.

Sections are Server Components. Interactivity is scoped to small client islands, so a page assembled from nine sections ships almost no JavaScript.

Documentation from source

A build step reads the real component files from disk and generates two maps: raw source text, and a slug-to-component import map. The preview on a component page and the code below it come from the same file, so they cannot disagree — and a test regenerates the registry in memory and fails if it has drifted.