/>
MDX UI
$ init
Preview

Preview

Bordered preview frame for showcasing component output alongside code

Installation

npx @ravikumarsurya/mdx-ui add preview

Usage

import { Preview } from "@/components/mdx/preview";
 
<Preview>
  <button className="rounded bg-primary px-4 py-2 text-primary-foreground">
    Click me
  </button>
</Preview>;

Examples

Stable

Component showcase

Wrap any component output in Preview to give it a consistent bordered frame.

<Preview>
  <Callout variant="info">
    This is how a Callout looks inside a Preview frame.
  </Callout>
</Preview>

With a label

<Preview label="Badge variants">
  <div className="flex gap-2">
    <Badge>Default</Badge>
    <Badge variant="success">Success</Badge>
    <Badge variant="warning">Warning</Badge>
  </div>
</Preview>

Dark background

<Preview dark>
  <Terminal>
    <TerminalLine>$ npm install</TerminalLine>
    <TerminalLine prompt={false}>added 42 packages</TerminalLine>
  </Terminal>
</Preview>

Props

PropTypeDefaultDescription
childrenReact.ReactNode—Content to preview (required)
labelstring—Optional label shown above the frame
darkbooleanfalseUse a dark background
classNamestring—Additional CSS classes
PreviousParagraph
NextReveal