Components

Doc components express semantics such as notes, diffs, structured blocks, and columns. Most components can be used as MDX tags or Markdown directives.

Callout

Callouts should reflect intent:

• Tip/Note: neutral white block for light hints or clarifications.
• Info: blue block for stable info or consistency notes.
• Warning: orange block for risks or hard constraints.
• Deprecated: red block for deprecations and migration notices.

Alerts (GitHub syntax)

Use GitHub-style alerts in Markdown and they will map to callouts automatically.

Columns

Cards

Use cards to surface key entry points, landing sections, or recommended reading. The grid defaults to four columns and collapses to two on mobile.

• Quickstart

  Install dependencies and scaffold the docs.

• Components

  Built-in MDX UI primitives.

• Project structure

  Understand content and navigation layout.

• Build validation

  CI checks for doc quality and broken links.

Cards (directive)

• Quickstart

  Install dependencies and scaffold the docs.

• Components

  Built-in MDX UI primitives.

• Project structure

  Understand content and navigation layout.

• Build validation

  CI checks for doc quality and broken links.

Link Buttons

Badges

Inline syntax: Experimental.

Math Equations

Inline math uses $...$. Block math uses $$...$$ and renders with KaTeX.

Inline example: $E = mc^2$.

Diff Block

Use to compare two approaches side by side. beforeLabel and afterLabel are optional when you want the top labels.

Code Block

Use standard Markdown code fences. The renderer adds the shared code styling and copy action.

export const navStrategy = "filesystem";export const contentPath = "content";

Colored Diffs

Lines starting with + or - in code blocks are rendered with diff backgrounds for upgrade guides.

- cache: "manual"+ cache: "filesystem"

Code Tabs

Switch between multiple snippets inside one block. Use the code-group directive without extra JSX.

const completion = await openai.chat.completions.create({  model: "gpt-5",  messages: [{ role: "user", content: "Jane, 54 years old" }],});

const response = await openai.responses.create({  model: "gpt-5",  input: "Jane, 54 years old",});

Rich panels

For mixed content (text, images, blocks), use :::code-group with :::tab panels.

[docs]static = true

:::

Steps

Turn ordered lists into step-by-step flows for long procedures.

1. Install the typematter dependencies.

2. Update the content/ directory structure.

3. Run npm run validate:docs before building.

File Tree

Render Markdown lists as a file tree with collapsible folders.

Details / Accordion

Use collapsible blocks for supporting or optional content.

Annotations

Inline annotations add contextual tooltips that still support Markdown.

This API is experimental iHeads upSee the migration guide for constraints..

Feature Matrix

Compare multiple offerings with a semantic Markdown table.