When markdown isn’t enough.

Seven components available in any .mdx file. Copy the tag, fill in the props, ship it. All components are auto-imported — no import statements needed.

Callout

Highlighted block for tips, warnings, or important notes.

<Callout tone="info">We use **Pleo** for everything below £200.</Callout>
<Callout tone="warn">Don't link from a public page into `/internal/`.</Callout>

Do / Don’t

Side-by-side comparison of good vs bad examples.

<DoDont do="Lead with the outcome." dont="Lead with the process." />

Steps

Numbered step list with coral circle markers.

<Steps steps={[
  "Photo the receipt at the point of paying.",
  "Submit in Pleo within 7 days.",
  "Tag the project code."
]} />

1. 1 Photo the receipt at the point of paying.
2. 2 Submit in Pleo within 7 days.
3. 3 Tag the project code.

Stat

Large gradient number with a caption.

<Stat value="93%" caption="Customer CSAT" />

FAQ

Collapsible question/answer pair.

<FAQ question="Can I expense a co-working day?">
  Yes — up to £30, once a week.
</FAQ>

PersonCard

Small avatar card for team members.

<PersonCard name="Ed Marsden" role="Co-founder · Design" initials="EM" />

KV (Key-Value Table)

Key-value display table.

<KV items={[
  { key: "Category", value: "Hotel" },
  { key: "Limit", value: "£180 / night" },
  { key: "Approval", value: "Pre-approve with line manager" }
]} />