# CodeTabs

A code viewer for the files of one example, with optional numbered tour stops.

- **Use it for**: Several files of one example, with optional tour stops.
- **Not for**: One command. Try [Snippet](https://unseenui.com/components/snippet/).

## Good to know

- With `copy`, the file has one Copy button: the code block inside hides its own.

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { CodeTabs } from '@stackunseen/ui/devtools';
import '@stackunseen/ui/styles.css';

<CodeTabs files={files} label="Example files" tour={tour} hashLinks="tour-" copy />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `codeBlock` | `ComponentType<CodeTabsCodeBlockProps>` | The code block to render; defaults to the plain block. |
| `copy` | `boolean` | A CopyButton for the current file. |
| `defaultStop` | `number \| null` |  |
| `defaultValue` | `string` |  |
| `files` (required) | `readonly CodeFile[]` |  |
| `hashLinks` | `string \| false` | A hash prefix such as "tour-" for #tour-3 deep links, kept with history.replaceState. |
| `label` (required) | `string` | Names the file list. |
| `narrowBreakpoint` | `number` | Below this width the file list runs across the top. |
| `onStopChange` | `((stop: number \| null) => void)` |  |
| `onValueChange` | `((file: string) => void)` |  |
| `stop` | `number \| null` | The open stop's index, or null for none. |
| `tour` | `readonly CodeTourStop[]` |  |
| `value` | `string` |  |

## Keyboard

The file list is a tablist with arrow keys, Home and End. Stop buttons carry aria-current="step" and the open stop is announced in a polite live region.

## Works with

[Snippet](https://unseenui.com/components/snippet/), [Commit](https://unseenui.com/components/commit/), [EnvironmentVariables](https://unseenui.com/components/environment-variables/), [PackageInfo](https://unseenui.com/components/package-info/), [SchemaDisplay](https://unseenui.com/components/schema-display/), [StackTrace](https://unseenui.com/components/stack-trace/), [WebPreview](https://unseenui.com/components/web-preview/), [Image](https://unseenui.com/components/image/), [FileExplorer](https://unseenui.com/components/file-explorer/), [CodeDiff](https://unseenui.com/components/code-diff/), [TerminalOutput](https://unseenui.com/components/terminal-output/), [TestResults](https://unseenui.com/components/test-results/)

Page: https://unseenui.com/components/code-tabs/