Preview Directive

since v0.6.0Source

The preview directive renders MDX content inside the default theme preview shell.

Syntax

:::preview
<RenderedExample />

---

```tsx tab title="index.tsx"
export function RenderedExample() {
  return <button>Save</button>;
}
```
:::

Part	Required	Description
`:::preview`	Yes	Starts the preview directive. Titles are not supported.
Content before `---`	Yes	Rendered into the `PreviewStage` slot.
First top-level `---`	No	Splits the preview stage from the supporting panel.
Content after `---`	Yes, when `---` exists	Rendered into the `PreviewPanel` slot.
Closing fence	Yes	Ends the directive. Use a longer fence when nesting other directives.

A preview directive renders through these MDX components:

Component	Purpose
`Preview`	Wraps the whole preview block.
`PreviewStage`	Wraps rendered content above the divider.
`PreviewPanel`	Wraps supporting content below the divider.

Custom themes should provide all three components when overriding the MDX component map.

The parser rejects:

Invalid input	Reason
Empty `:::preview`	The stage is required.
`:::preview` with only `---`	The stage and panel are both empty.
`:::preview` with empty content before `---`	The stage is required.
`:::preview` with empty content after `---`	A divider requires panel content.
`:::preview Title`	Preview directive titles are not supported.

Only the first top-level thematic break splits the preview.

Additional thematic breaks after the first divider stay inside PreviewPanel.

When a preview contains another container directive, use a longer outer fence.

::::preview
<RenderedExample />

---

:::tip
Use a longer outer fence when the panel contains another directive.
:::
::::

:::preview
<RenderedExample />
:::

:::preview
<RenderedExample />

---

```tsx tab title="index.tsx"
export function RenderedExample() {
  return <button>Save</button>;
}
```
:::

Last updated: 4/23/26, 10:57 PM