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.
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.
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.
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):
Three-column mode (N-col extension — rows is an array of arrays):
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