Preview Code

The PreviewCode component is a powerful tool for documentation. It renders a live, interactive preview of a component and displays the corresponding source code below it, with a handy copy button.

Usage

The component takes two main props: rawCode (a string of the code to display) and children (the actual component to render).

<Button variant="outline">Click Me</Button>

<PreviewCode rawCode={`<Button variant="outline">Click Me</Button>`}>
  <Button variant="outline">Click Me</Button>
</PreviewCode>