# Code block

> Present code with legible hierarchy and copy access.

- Type: Component (data)
- Access: Free, open source
- Page: https://ui.xzero.co.uk/components/code-block
- Markdown: https://ui.xzero.co.uk/components/code-block/markdown
- Registry item: https://mcp.xzero.co.uk/r/code-block.json
- Source file: `registry/components/code-block/code-block.tsx`
- Dependencies: motion, lucide-react
- Keywords: content, developer, react code block, syntax highlighting, code snippet component, copy code block, collapsible code, code viewer

## When to use

- Documentation snippets and install commands with a copy button.
- Long files that should collapse to a few lines with Show all, via maxLines.

## When not to use

- Use copy-button alone for a one-line value such as an API key.
- Use text-stream for code arriving from an AI response in progress.
- Use a full highlighter library when you need many languages.

## Installation

Register both Xzero UI namespaces in your project's components.json:

```json
{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}
```

```bash
npx shadcn@4.23.0 add @xzero-ui/code-block
```

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

## Usage

```tsx
import { CodeBlock } from "@/components/xzero/code-block/code-block";

const snippet = `export function hello() {
  return "world";
}`;

export function Example() {
  return <CodeBlock code={snippet} filename="hello.ts" language="ts" maxLines={12} />;
}
```

## API reference

### CodeBlock

A source viewer with filename header, light syntax highlighting, copy button, and optional collapse.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `code` (required) | `string` | – | Source shown and copied. |
| `filename` | `string` | – | File name in the header. Defaults to "Source code". |
| `language` | `string` | `"tsx"` | Header label and highlighter mode. |
| `maxLines` | `number` | – | Collapses longer sources to this many lines with a Show all toggle. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Focuses the copy button, the scrollable source, and the expand toggle. |
| Enter / Space | Copies the code or toggles the expanded state. |

## Accessibility

- The block is a section labelled like "hello.ts source code"; the pre is focusable so keyboard users can scroll it.
- The expand toggle uses aria-expanded and aria-controls pointing at the source.
- Copy feedback comes from copy-button.

## Motion

- Expanding or collapsing springs the source height; new code fades up in place.
- The toggle label rolls and its chevron rotates.
- Reduced motion snaps height and swaps text without movement.

## Responsive behavior

- Long lines scroll horizontally inside the block, never the page.
- Below 420px the padding and font shrink and the copy button becomes icon-only.

## Performance

- The built-in highlighter is a small regex pass with no language bundles.
- ResizeObservers measure the source for the height spring; many blocks on one page each run their own.

## Notes for AI

- Use for documentation snippets and install commands. The highlighter is lightweight; use a full highlighter for many languages.
- Set maxLines for long files so pages stay scannable.

## Related

- [Copy button](https://ui.xzero.co.uk/components/copy-button/markdown): Copy a value with immediate confirmation.
- [Tree view](https://ui.xzero.co.uk/components/tree-view/markdown): Navigate nested folders and structured content.

## Also in tables

- [Sortable data table](https://ui.xzero.co.uk/components/sortable-data-table/markdown): Compare structured records with sortable columns.
- [Tree table](https://ui.xzero.co.uk/components/tree-table/markdown): A table with nested rows, tri-state selection, hierarchy-preserving sort, and lazy-loaded children.
- [Reorderable list](https://ui.xzero.co.uk/components/reorderable-list/markdown): Organize items with direct drag and drop.
- [Filter toolbar](https://ui.xzero.co.uk/components/filter-toolbar/markdown): Keep collection filters close and easy to reset.
- [JSON viewer](https://ui.xzero.co.uk/components/json-viewer/markdown): A collapsible JSON tree with search, paging for long arrays, and copy value or path.

## Guidance for AI tools

Code block: Present code with legible hierarchy and copy access. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt