CodeBlock

content

Syntax-highlighted code block with copy-to-clipboard. Supports aterm variant with macOS traffic-light chrome and an optional caption.

Preview

Scale1.00

Button Usage example

import { Button } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';

function App() {
  return <Button variant="primary">Go</Button>;
}

$ PRIVATE_BETA_INSTALL_INSTRUCTIONS_REDACTED PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED
Resolving packages...
Done.

Usage

import { CodeBlock } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';

<CodeBlock
  code={"const x = 1;"}
  caption="Example"
  language="typescript"
/>

// Terminal variant
<CodeBlock code={"$ bun dev"} term />

Props

Prop	Type	Default	Description
`code`	`string`	required	Raw code (HTML string with syntax-token spans)
`caption`	`string`	--	Caption above the code block
`captionHighlight`	`string`	--	Highlighted name in the caption
`language`	`string`	--	Language label for screen readers
`term`	`boolean`	`false`	Renders traffic-light window chrome
`class`	`string`	--	Additional CSS classes

Accessibility

Copy button: Announces "Copied to clipboard" via a role="status" live region.
Pre element: Has aria-label with the language name.
Traffic-light dots: Marked aria-hidden="true" (decorative).
Keyboard: Copy button is focusable and activates on Enter/Space.

Do / Don't

Do

Use the term variant for shell commands to visually distinguish them from source code.

Don't

Don't pass unsanitized user input as code -- it's rendered as innerHTML.