## Code Tabs (S—161)

A code block with file tabs, line numbers, highlighted lines and a copy button; long lines scroll, not wrap.

- URL: https://sundaeui.dev/components/code-tabs
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/code-tabs.json`
- Tags: code-block, tabs, snippet, code, docs, copy

Tabs switch between files (or languages). Lines you mark are highlighted with a bar in the gutter, and line numbers are selectable-proof so copying gets only code.
Copy confirms in place. Syntax colouring is deliberately left out; tokens get weight, not colour, to stay monochrome.

### Usage

```tsx
import { CodeTabs } from '@/components/sundae/code-tabs'

<CodeTabs />
```

### Props

- `files` (`{ name: string; code: string; highlight?: number[] }[]`, required): Files.
- `showLineNumbers` (`boolean`, default `true`): Gutter numbers.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Docs, READMEs on the web, API references, blog posts.

### When not to use

- Editable code: use an editor component.

### Accessibility

- WAI-ARIA tabs; the code is a focusable region so it can scroll by keyboard.
- Copy announces the result.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: Switch file