# CodeBlock

Read-only code surface with copy support.

Choose CodeBlock for read-only code that readers may need to copy.

## API

The package declarations define these public members.

| Member | Type | Kind | Required | Default | Description |
| --- | --- | --- | --- | --- | --- |
| `code` | `string` | prop | Yes | - | Raw source. Exactly what the copy button puts on the clipboard. |
| `copyLabel` | `string` | prop | No | `'Copy code'` | Accessible label for the copy control. |
| `copyable` | `boolean` | prop | No | `true` | Render the copy control in the header. |
| `filename` | `string` | prop | No | `undefined` | Header label. |
| `highlight` | `(code: string, language: string) => string` | callback | No | `undefined` | Opt-in highlighter. The kit bundles none. Whatever this returns is injected with `{@html}` — **the caller owns sanitisation**. |
| `label` | `string` | prop | No | `undefined` | Accessible label for the code region. |
| `language` | `CodeLang \| (string & {})` | prop | No | `'text'` | Header label, and the hint passed to `highlight`. |
| `maxHeight` | `number` | prop | No | `undefined` | Maximum body height in px; taller content scrolls. |
| `showLineNumbers` | `boolean` | prop | No | `false` | Render a line-number gutter. |
| `wrap` | `boolean` | prop | No | `false` | Soft-wrap long lines instead of scrolling horizontally. |

## Related

- [Eyebrow](/docs/components/eyebrow): Tracked label used above headings.
- [Avatar](/docs/components/avatar): Identity image or fallback with an optional status marker.
- [Stat](/docs/components/stat): Metric value and caption for KPI compositions.