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

Demo

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

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

Props

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.

Accessibility

CodeBlock has no custom focus management for its own controls: the copy button is a native button, reachable with Tab and activated with Enter/Space, and (in variant="example") the Preview/Code switcher reuses ToggleGroup's own roving-tabindex behavior rather than reimplementing it. The read-only code panel only joins the tab order when its content actually overflows horizontally, so keyboard users can scroll clipped code into view. When editable is true, the textarea intercepts every Tab keypress — including Shift+Tab — to insert two spaces instead of moving focus, so there is currently no keyboard-only way to tab out of an editable code block.