Start
Foundations
Design Systemv1.3.0Search documentation
Search for a command to run or a page to navigate to.
Design Systemv1.3.0Search for a command to run or a page to navigate to.
The page contract every docs page follows, plus a live example of every docs-only content block.
Every block on this page is a live render — no screenshots. Use it to spot-check tokens, verify prose measure, and confirm block spacing after global CSS changes. The page is unlisted; reach it at /styleguide.
Every page under content/docs/ follows the same seven rules. They exist so a reader can move between pages without relearning where things are, and so an author never has to invent structure.
What a page is made of, top to bottom.
Open with prose, never a heading. The first thing below the frontmatter is a lead paragraph saying what the page is for. A page that opens on ## Overview has buried its own summary — fold that section into the lead.
Add a <ContractStrip> when the page asks the reader to do something. Install guides, migrations, and setup pages state audience, effort, and prerequisites up front. Conceptual and reference pages don't need one.
## for every top-level section, ### only underneath one. Headings are sentence case. A page whose sections are all ### reads as a fragment of a larger page in the table of contents.
End with exactly one <ReferenceList> or <RelatedCards> under a ## Related heading. Never a hand-rolled bullet list of links — those drift, repeat entries, and keep labels that no longer match the pages they point at.
How the blocks get used.
Two step systems, two jobs. <Steps>/<Step> carries the page's main procedure when the steps contain code blocks. <Procedure>/<ProcedureStep> carries short, code-free sequences — troubleshooting fixes and checklists. Neither is a list of links.
<CalloutRail> states a rule, <Callout> adds an aside, <Checkpoint> proves it worked. Reach for the rail only when something is genuinely required or forbidden — it draws the eye, and overuse flattens the signal.
Never hardcode a count or a version in prose. Use <ComponentCount /> and <VersionFooter />. A hardcoded figure is wrong the first time a component ships, and nobody notices for a year.
Don't run Prettier over the pages in content/docs/. Its MDX formatter collapses fenced code blocks nested inside JSX onto one line and escapes {/* … */} comment blocks into visible page text. apps/docs/.prettierignore keeps it away from them; the generated component pages stay formatted because they only contain top-level fences.
Appears at the top of a page to set audience, effort, and applicability expectations.
With a custom items array (replaces or supplements the named props):
Left-border emphasis blocks. tone="required" uses brand accent; tone="dont" is neutral. An optional label overrides the eyebrow word.
This is a required callout. The eyebrow defaults to "Required" when no label is passed.
This is a don't callout. The eyebrow defaults to "Don't". Use sparingly — the rail draws attention; overuse dulls it.
Custom label overrides the tone-derived eyebrow word. Tone still drives the accent color.
Inline confirmation or success note with a brand checkmark.
Both commands should exit 0. If they don't, see Troubleshooting — most failures are a missing peer dep or a tsconfig path issue.
Numbered step badge + eyebrow label. Standalone it renders just the badge; in practice pass it to <Section step={n} eyebrow="…"> (see below) so the badge, eyebrow, and heading form one unit under the section divider.
Horizontal rule + large heading, used to organise a long page into titled sections. Headings inside <Section> do not receive the id auto-anchor — they are structural, not linkable.
Content placed inside a <Section> renders below the heading with a top margin. Use <Section> when you want the thick border + heading hierarchy without writing a bare ## heading that would appear in the TOC.
With step + eyebrow, the numbered badge and eyebrow sit tight above the heading and the divider separates one step from the previous — the shape used on the Code quality setup page.
The step badge, eyebrow, and heading read as one unit. The divider above belongs between steps, not between the number and its heading.
The next step's divider gives it clear separation from the content above.
Ordered steps with large mono counters. index is injected automatically by <Procedure>.
Run git clone and cd into the project directory.
Run npm install. Requires Node 22+ and npm 10+.
Run npm run dev. Storybook opens at localhost:6006.
Nine rule groups with 34 rules live on the Design standards page. The right slot shows a pattern link, a lint tag, or an em-dash.
title is optional. Prefer a real markdown ## heading directly above the group and leave title off — the table of contents is built from the MDX source at build time, so a heading this component renders at runtime never appears in it. Pass title only when the group should stay out of the table of contents, as in the demo below.
Group sub-heading that sets the decision context.
Rule with a cross-page pattern link. The link prop is the visible label; href is the destination. Internal paths use next/link; external URLs open in a new tab.
Rule with a lint tag. link="lint" renders a muted pill label instead of a hyperlink.
Rule with an em-dash (no link or href). Used when a rule is enforced by convention rather than tooling or a linked example.
Two-column mode (legacy signature — keeps support.mdx working):
| Situation | Answer |
|---|---|
| Existing app, no design system | Start with the registry — install components individually. |
| New app | Use the full package install — all components from the first commit. |
Three-column mode (N-col extension — rows is an array of arrays):
| Layer | Use | Version |
|---|---|---|
| Server state | TanStack Query | 5+ |
| Session state | React Context | — |
| Forms with validation | React Hook Form + Zod | 7+ / 3+ |
Term + definition pairs in a compact list.
Side-by-side recommendation cards. recommended adds the brand "Start here" badge and a bold border.
Install all components at once. Best for new projects or teams adopting the full system.
Install components individually into your source tree. Best for gradual adoption.
Linked reference footer, typically placed at the bottom of a page.
Exactly two related-content cards. Each card is a full-bleed link.
A plain fenced code block whose first line starts with npm install, npx, or npm run is automatically upgraded to a package-manager tab strip. Never author <CodeBlockCommand> or <Tabs> directly.
All four type values from the <Callout> component:
Informational callout. Use for context that supplements but isn't blocking.
Warning callout. Use for gotchas, footguns, and things that break silently.
Success callout. Use sparingly — confirms a correct outcome.
Error callout. Use for known failure modes with explicit remediation steps.
Shown at the top of a deprecated component page. Accepts an optional replacement + href pair.
Without a replacement:
Placeholder for docs sections whose content isn't ready yet.
This section covers the advanced configuration options for the @strongtie/eslint preset. It will be published alongside the 2.0 release.
Renders all 25 patterns with topic chips, expand/collapse, and hash-based open-on-load. The server component pre-highlights all code with Shiki; the client component handles interactivity.
Jump to topic