- Home
- Components
- Preview

# 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