# Code preview

> Render an example above its source.

The last code block inside `CodePreview` becomes the source panel. Everything before it is rendered as the preview. Every example in this gallery uses it.

<CodePreview>
<Badge variant="tip">Rendered</Badge>

```mdx
<Badge variant="tip">Rendered</Badge>
```
</CodePreview>

````mdx
<CodePreview>
<Badge variant="tip">Rendered</Badge>

```mdx
<Badge variant="tip">Rendered</Badge>
```
</CodePreview>
````
