CodeBlock

A styled code block with a copy button, and an optional tabbed Preview/Code switcher for live component examples.

Installation

npx dafink-ui add code-block

Also installs: Toggle-group

import Button from '@/src/components/Button/Button';

export default function Example() {
  return <Button>Click me</Button>;
}

Name	Type	Default	Description
code	string	-	Required. The raw source code rendered in the code panel.
variant	"code" \| "example"	"code"	"code" renders the block alone. "example" adds a Preview/Code ToggleGroup above the panel.
children	React.ReactNode	-	Required when variant="example". Rendered in the Preview tab.
label	string	"example"	Accessible label for the ToggleGroup tab strip (example variant only).
minHeight	string	"200px"	CSS min-height on the preview pane (example variant only).
align	"center" \| "start"	"center"	Flex alignment of content in the preview pane (example variant only).
className	string	""	Additional Tailwind classes merged onto the root wrapper.