# Code viewer

> File tabs, line numbers, highlighted lines, copy and expand, with a dependency-free highlighter.

Component · Free · https://lodeui.com/components/code-viewer

## When to use

- Showing code samples with file tabs, highlighted lines and copy.

## When not to use

- Editing code: use an editor.
- Comparing versions: use the diff viewer.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/code-viewer.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { CodeViewer } from "@/components/ui/code-viewer";

export function Snippet() {
  return <CodeViewer files={[{ name: "client.ts", language: "ts", code: "export const api = createClient();" }]} highlight={[1]} />;
}
```

## API reference

### CodeViewer

Code with file tabs, line numbers, highlighted lines, copy and expand. No highlighter dependency.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| files | `{ name; code; language?: "tsx" \| "ts" \| "js" \| "json" \| "bash" \| "css" \| "text" }[]` | – | One tab per file. |
| lineNumbers | `boolean` | `true` | Gutter numbers. |
| highlight | `number[]` | `[]` | 1-based lines to highlight in the first file. |
| maxHeight | `number` | – | Collapse to this height with an expand button. |

### tokenize

The tokenizer used inside, for your own renderers.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| code / language | `string / CodeLanguage` | – | Returns tokens per line. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach file tabs, copy and expand |
| Enter / Space | Switch tab or copy |

## Accessibility

- File tabs are a tablist; copy announces success.

## Motion

- The tab indicator slides; expand animates height.

## Responsive behavior

- Lines scroll horizontally; they never wrap.

## Performance

- Tokenizing is linear; fine for files of a few thousand lines.

## Notes for AI

- For full syntax accuracy on the server, use shiki instead.

## Related

- [Diff viewer](https://lodeui.com/components/diff-viewer) — Line diff in unified or split view with added/removed counts.
- [Terminal](https://lodeui.com/components/terminal) — A terminal window that types commands and streams output, with replay and copy.
- [JSON viewer](https://lodeui.com/components/json-viewer) — Collapsible, syntax-colored JSON tree.