sigilUI

Code Preview

Display a source-code example in a styled panel.

@sigil-ui/componentsReact

Preview

Live preview Interactive

Import

import { CodePreview } from "@sigil-ui/components";

Usage

<CodePreview preview={<Button>Preview</Button>} code={`<Button>Preview</Button>`} language="tsx" />

CLI

npx @sigil-ui/cli add code-preview

Token Integration

CodePreview follows the Sigil component rules: styles resolve from var(--s-*), class names are mergeable through className, and the component is exported from @sigil-ui/components.