MDX Components

MDX pages can use registered React components directly in the document body. Components are registered in src/components/markdown/mdx-renderer.tsx.

Admonition

Rendered callout

Use callouts for warnings, notes, tips, and important context that should stand apart from the main flow.

MDX

<Admonition type="tip" title="Rendered callout">
Use callouts for warnings, notes, tips, and important context.
</Admonition>

Supported types:

Text

note, tip, info, warning, danger, success

MkDocs admonitions

MkDocs-style admonitions are preprocessed before MDX rendering.

Markdown

<Admonition type="warning" title="Production secret">
Never ship the seeded admin password to production.
</Admonition>```

The renderer converts that to an `Admonition` component.

Collapsible MkDocs syntax is also supported:

```md
<Collapsible title="Details">

<Admonition type="note">
This content becomes a collapsible block.
</Admonition>

</Collapsible>```

Both `???` and `???+` currently render as collapsible blocks. The open-by-default marker is not preserved by the current preprocessor.

## Collapsible

<Collapsible title="Rendered collapsible">
This content is available after the user opens the section.
</Collapsible>

```mdx
<Collapsible title="Rendered collapsible">
This content is available after the user opens the section.
</Collapsible>

Protected

The Protected component gates a subsection inside an otherwise visible page.

Partner Content

This section is available to Partner members and above. Sign in or request access to view.

MDX

<Protected tier="partner" label="Partner">
This text is visible only to partner-tier users and above.
</Protected>

Use page-level access_tier when the whole page should be gated. Use Protected when only one section needs stronger access.

VideoEmbed

MDX

<VideoEmbed
  src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  title="Release walkthrough"
/>

The component supports YouTube and Vimeo URLs. You can also set a video value in frontmatter to render the video above the document body.

ExtensionGrid

ExtensionGrid renders direct child docs beneath a path.

MDX

<ExtensionGrid path="authoring" columns={2} />

It only includes published, visible, direct children. The grid uses title, summary, slug, and nav_order from each child page.

Code blocks and code tabs

Plain fenced code blocks are rendered by the custom code block component and include copy behavior.

Markdown

```bash
docker compose up -d --build
```

CodeTabs can group examples:

MDX

<CodeTabs labels={["Docker", "Node"]}>

```bash
docker compose up -d --build
```

```bash
npm run dev
```

</CodeTabs>