PreviewCode

Pair a rendered component example with its MDX source. The Code tab shows the fenced block you write beside the preview, not source read back from the rendered part, so keep the two in step by hand: nothing checks that they match. Use PreviewCode for component catalog examples so readers can inspect the result first and switch to the code without scrolling through a duplicated section.

API

PreviewCode

Prop	Type	Default	Description
`title`	`string`	—	Optional heading shown above the preview/code switcher.
`description`	`string`	—	Optional short context for the example.
`defaultMode`	`"preview" \| "code"`	`"preview"`	Initial tab.
`children`	`ReactNode`	—	Include one fenced code block plus the rendered preview content.

Example

PreviewCode

Callout example

The first fenced block becomes the Code tab. The remaining children become the Preview tab.

Use real output

Prefer generated pages, command output, and source snippets over abstract placeholders.


<Callout type="tip" title="Use real output">
  Prefer generated pages, command output, and source snippets over abstract placeholders.
</Callout>