Component
CodePreview
A compound component for displaying a live UI preview alongside its source code. Includes tab switching and a one-click copy button.
Usage
API Reference
CodePreview.Root
| Prop | Type | Default | Description |
|---|---|---|---|
code* | string | — | The source code string to display in the Code tab and to copy. |
defaultView | "preview" | "code" | "preview" | Which tab is active on initial render. |
unstyled | boolean | false | Strip all default styles from all sub-components. |
CodePreview.Tab
| Prop | Type | Default | Description |
|---|---|---|---|
view* | "preview" | "code" | — | Which panel this tab activates when clicked. |
icon | ReactNode | — | Optional icon rendered before the tab label. |
CodePreview.CopyButton
| Prop | Type | Default | Description |
|---|---|---|---|
copyLabel | string | "Copy Code" | Label shown in idle state. |
copiedLabel | string | "✓ Copied" | Label shown for 2 seconds after copying. |