Components
CodeBlock
Syntax-highlighted code block with optional line numbers and a copy button.
CodeBlock renders a code string with Prism syntax highlighting for the given
language. Toggle the line-number gutter with showLineNumbers, keep or hide the
built-in copy button with showCopy, and cap the height with maxHeight to make
long snippets scroll. Use it for docs, examples, and API payloads.
Example
Preview
1<Button variant="secondary">Save</Button>
import { CodeBlock } from '@officina/ui';
function Snippet() {
return (
<CodeBlock language="tsx" showLineNumbers code={`function hello() {\n return 'world';\n}`} />
);
}API
| Prop | Type | Default | Description |
|---|---|---|---|
| code* | string | — | Source code to render. |
| language | string | tsx | Language for syntax highlighting (e.g. "ts", "bash"). |
| maxHeight | number | — | Max height in pixels before the block scrolls. |
| showCopy | boolean | true | Show a copy-to-clipboard button. |
| showLineNumbers | boolean | — | Show a line-number gutter. |