MDX components cheatsheet
All available Fumadocs components, ready to use without imports
This page is a reference for the MDX components available across the documentation. All components below are registered globally — you can use them in any .mdx file without import statements.
The source code on the right of each example shows what to type. Copy and adapt.
Callout (info blocks)
Four built-in variants plus custom title.
This is an info callout. Used for general information and tips.
This is a warning callout. Used for important notices.
This is an error callout. Used for critical issues.
This is a success callout. Used for confirmations.
Custom title
You can also provide a custom title instead of the default type label.
<Callout type="info">Info text</Callout>
<Callout type="warn">Warning text</Callout>
<Callout type="error">Error text</Callout>
<Callout type="success">Success text</Callout>
<Callout title="Custom title">With custom title</Callout>Cards (boxes in columns)
Auto-responsive grid: 1 column on mobile, 2–3 on desktop.
Pipelines
End-to-end strategic paths.
Techniques
Composable procedural units.
Canvases
Visual tools with compilation guides.
<Cards>
<Card title="Title 1" href="/path-1" description="Description 1" />
<Card title="Title 2" href="/path-2" description="Description 2" />
</Cards>Steps (numbered procedures)
Use for any sequence: workflows, tutorials, multi-step processes.
<Steps>
<Step>
### Title of step
Content of the step.
</Step>
</Steps>Tabs (multi-variant content)
Use for code in different languages, alternative approaches, or comparing options.
Use Pipelines and Techniques to compose your engagement. Each pipeline is documented with its phases and outputs.
Follow the linear narrative of the original toolkit guide. Useful for historical reference and comprehensive overview.
<Tabs items={["Tab A", "Tab B"]}>
<Tab value="Tab A">Content A</Tab>
<Tab value="Tab B">Content B</Tab>
</Tabs>Accordion (collapsible FAQ)
Use for FAQ sections, optional details, or anything you want users to opt into reading.
<Accordions>
<Accordion title="Question?">Answer text.</Accordion>
</Accordions>Files (file/folder tree)
Useful for showing project structures, deliverable structures, or canvas layouts.
<Files>
<Folder name="root/" defaultOpen>
<Folder name="subfolder/">
<File name="file.txt" />
</Folder>
</Folder>
</Files>Banner (top-of-page announcements)
Used for site-wide or section-wide notices.
<Banner>Announcement text</Banner>InlineTOC (in-page table of contents)
Auto-generated from the H2/H3 headings of the current page. Useful for long pages.
<InlineTOC items={toc} />TypeTable (structured property tables)
Useful to document objects, fields, or canvas sections.
Name
Type
Default / Description
<TypeTable
type={{
fieldName: {
description: 'What this field is',
type: 'string',
required: true,
default: 'value'
}
}}
/>Image with zoom
Wrap any image with <ImageZoom> to enable click-to-zoom.
<ImageZoom>
</ImageZoom>Markdown basics (always work)
Standard Markdown is always available — no import needed:
| Syntax | Example | Result |
|---|---|---|
| Heading | # H1, ## H2, ### H3 | section titles |
| Bold | **text** | text |
| Italic | *text* | text |
| Code inline | `code` | code |
| Link | [text](url) | text |
| List | - item | bulleted list |
| Numbered list | 1. item | numbered list |
| Quote | > text | indented quote |
| Code block | ```ts code``` | syntax-highlighted block |
| Horizontal rule | --- | divider |
| Image |  | image |
Frontmatter fields used in this site
---
title: "Page title" # required
description: "Short summary" # shown in cards and search
status: "stable" # stable | beta | draft | stub | active
toolkit: "pdt" # pdt | 3eo | portfolio (canvas pages)
toolkitLabel: "Platform Design Toolkit" # human-readable toolkit name
toolkitSection: "exploration" # exploration | design | growth (canvas pages)
version: "2.2" # canvas version
duration: "4-6 hours" # technique / pipeline duration
difficulty: "intermediate" # beginner | intermediate | advanced
pipeline: "Understanding Ecosystems" # technique pages — owning pipeline
domain: "product" # technique pages — product | organization | bridge
legacy: true # for legacy guide pages
---Previous / next links
These appear automatically at the bottom of every docs page. They're driven by the pages order in each section's meta.json — you don't write them in MDX.
To change the order, edit content/docs/{section}/meta.json:
{
"title": "Section name",
"pages": ["index", "first-page", "second-page", "third-page"]
}