# Preview

Use `Preview` for component examples where readers need to see the rendered result and the source code together.

## Usage

```mdx
<Preview lang="html">
  <button type="button" class="btn">Save changes</button>
</Preview>
```

## Options

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `code` | `string` | Generated from children | Optional source override for the code tab. |
| `lang` | `string` | `"html"` | Language passed to Shiki. |
| `title` | `string` | `undefined` | Label for the preview tab. |
| `class` | `string` | `""` | Extra classes applied to the preview canvas. |

## Examples

### Button

```html
<button type="button" class="btn">Save changes</button>
```

### Custom title

```mdx
<Callout title="Configuration">
  The source remains available from the Code tab.
</Callout>
```