CodePreview

Interactive demo panel with toolbar, preview canvas, and collapsible source.

Example

tsx
import { Button } from '@toucan-ui/react';

export function Demo() {
  return <Button variant="primary">Save changes</Button>;
}

Props

NameTypeDefaultRequiredDescription
codestringRequiredSource code content
languagestringNoLanguage label for the source block
toolbarReactNodeNoOptional demo controls
showCodebooleanNoWhether source is visible
onToggleCode() => voidNoToggle handler for source view
childrenReactNodeNoPreview content

Composed Primitives