Preview

The Preview component is used throughout the documentation to display components alongside their code examples. It supports flexible layouts for showcasing components in different arrangements.

FormLayout Options

Default Layout

By default, the Preview component displays components horizontally with code below:

<Button>Default Layout</Button>

Left Layout

Use left prop to position the component on the left side with a fixed width:

<Button>Left Layout</Button>

Right Layout

Use right prop to position the component on the right side with a fixed width:

<Button>Right Layout</Button>

Custom Width

You can specify custom widths for left or right layouts:

<Button>Custom Width (300px)</Button>

<Button>Custom Width (150px)</Button>

Props

Required Props

Prop	Type	Description
`children`	`ReactNode`	Required. The code example content to display. Typically contains a markdown code block with syntax highlighting.
`component`	`ReactNode`	Required. The actual component or JSX element to render in the preview panel.

Layout Props

Prop	Type	Default	Description
`left`	`boolean \| number`	`undefined`	Positions the component on the left side with code on the right. If `true`, uses default width of 200px. If a number, uses that value as width in pixels.
`right`	`boolean \| number`	`undefined`	Positions the component on the right side with code on the left. If `true`, uses default width of 200px. If a number, uses that value as width in pixels.

Code Block Props

Prop	Type	Default	Description
`lines`	`number`	`undefined`	Fixed height in lines. If `collapsed=true`, shows this many lines when collapsed. If `collapsed=false`, uses this as max height with scroll.
`collapsed`	`boolean`	`false`	Enable collapse/expand button functionality.
`startCollapsed`	`boolean`	`false`	Start in collapsed state (requires `collapsed=true`).
`maxLines`	`number`	`undefined`	When expanded, max lines before adding scroll. Only works with `collapsed=true`.

Default Values

The Preview component uses these constants for default widths:

Default left width: 200px (when left={true})
Default right width: 200px (when right={true})

Layout Behavior

Default layout (no left or right prop): Component displays above the code block in a horizontal stack
Left layout (left prop): Component panel on left (fixed width), code panel on right (flexible width)
Right layout (right prop): Code panel on left (flexible width), component panel on right (fixed width)
Mutual exclusivity: Only use either left OR right, never both simultaneously

Usage Notes

Only use either left OR right prop, not both
When no layout prop is provided, uses the default horizontal layout
The Preview component handles responsive behavior and code block styling automatically
Default widths are 200px for both left and right layouts
Code blocks automatically include copy buttons
Use collapsed={true} to enable collapse/expand functionality
Use lines={n} for fixed height or collapsed display height
Use maxLines={n} with collapsed={true} to control expanded height
Use startCollapsed={true} to begin in collapsed state