# CodeBlock

> A multi-line code sample with title, line numbers, highlighting and copy.

Category: Media & code · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/code-block

CodeBlock shows source code with light, dependency-free highlighting for TypeScript, CSS, shell and JSON. Code is always rendered as text, never as HTML. The scroll region is focusable so keyboard users can scroll long lines.

## Import

```tsx
import { CodeBlock } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Basic

```tsx
import { CodeBlock, Button, ThemeProvider } from '@bindshq/stance-react';

const tsx = `import { Button, ThemeProvider } from '@bindshq/stance-react';
import '@bindshq/stance-tokens/css';
import '@bindshq/stance-react/styles.css';

export function App() {
  // One system, two products
  return (
    <ThemeProvider>
      <Button>Save changes</Button>
    </ThemeProvider>
  );
}`;

export function Basic() {
  return <CodeBlock code={tsx} language="tsx" title="app.tsx" />;
}
```

### Line numbers and highlights

```tsx
import { CodeBlock, Button, ThemeProvider } from '@bindshq/stance-react';

const tsx = `import { Button, ThemeProvider } from '@bindshq/stance-react';
import '@bindshq/stance-tokens/css';
import '@bindshq/stance-react/styles.css';

export function App() {
  // One system, two products
  return (
    <ThemeProvider>
      <Button>Save changes</Button>
    </ThemeProvider>
  );
}`;

export function LineNumbers() {
  return (
    <CodeBlock
      code={tsx}
      language="tsx"
      title="app.tsx"
      showLineNumbers
      highlightLines={[8, 9, 10]}
    />
  );
}
```

### Shell

```tsx
import { CodeBlock } from '@bindshq/stance-react';

export function Shell() {
  return (
    <CodeBlock
      code={'# Install Stance\nnpm install @bindshq/stance-tokens @bindshq/stance-react'}
      language="bash"
    />
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| CodeBlock | `code` (required) | `string` | None | Source code (rendered as text). |
| CodeBlock | `language` | `string` | None | ts, tsx, js, jsx, css, bash, json. Others render plain. |
| CodeBlock | `title` | `ReactNode` | None | Title, e.g. a file name. |
| CodeBlock | `showLineNumbers` | `boolean` | `false` | Show line numbers. |
| CodeBlock | `highlightLines` | `number[]` | None | 1-based lines to emphasise. |
| CodeBlock | `copyable` | `boolean` | `true` | Show a copy button. |
| CodeBlock | `wrap` | `boolean` | `false` | Wrap long lines. |
| CodeBlock | `maxHeight` | `string` | None | Scroll beyond this height. |
| CodeBlock | `label` | `string` | None | Accessible name of the region. |

## Accessibility

- The code region is focusable (tabindex="0") and labelled, so keyboard users can scroll it.
- Line numbers are aria-hidden so they are not read with the code.
- Highlighting never carries meaning on its own.

## Keyboard

| Keys | Action |
| --- | --- |
| `Tab` | Focuses the copy button, then the scroll region. |
| `←` `→` `↑` `↓` | Scroll the focused code region. |

## Guidelines

**Do**

- Keep samples short and runnable.

**Don’t**

- Render user-supplied HTML as code output.

## Related

- https://stanceui.com/components/copyable-code
- https://stanceui.com/components/code