Documentation Layout

A documentation landing page from Markdown blocks - sections, cards, a live example, install tabs.

Last updated Aug 17, 20261 min read

A documentation front page, as a template. Like every built page it is only Markdown and blocks, which is the point being demonstrated: the docs system can document itself with itself.

Start here

Install

One command per installer. The registry serves both formats from the same entry, so there is nothing to keep in sync.

Concepts

The three ideas everything else hangs off: tokens, blocks, the registry.

A live example

Documentation here shows the component running, not a screenshot of it:

Viewport width
Desktop100%whatever the page has
tanstacktanstack add https://adamjurek.com/r/tanstack/card.jsonshadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/card.json

Install

tanstack add https://www.adamjurek.com/r/tanstack/card.json
shell
pnpm dlx shadcn@latest add https://www.adamjurek.com/r/shadcn/card.json
shell

Reference

Components

Everything installable.

Blocks

The assembled regions.

API

The read API, versioned.

Agents

Setup instructions machines can execute.

Copy this file

pnpm new page my-docs, paste this in, replace the words. The blocks - gridGridA responsive grid with no breakpoints in it. One number decides the column count at every width.@sushindustries/ui · layout, cardCardTitle, optional meta, arbitrary body. Heading level is a prop so the outline stays correct.@sushindustries/ui · layout, showcaseShowcaseA component in a real iframe at every width it has to survive, side by side, with its source and install commands.@sushindustries/ui · docs, tabs, spacerSpacerVertical space on the scale, optionally with a rule and a label. For Markdown, where there is no markup to hang a margin on.@sushindustries/ui · layout, callouts - are the whole layout vocabulary, and every one of them is atomic classes underneath.