# Code window (goodtabs UI)

A window frame around code, coloured with the code tokens.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/code-window.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/code-window`

## Usage

```tsx
import { CodeWindow, CodeToken } from "@/components/ui/code-window"

<CodeWindow title="add.sh">
  <CodeToken kind="name">npx</CodeToken> shadcn@latest add @goodtabs/browser-frame
</CodeWindow>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` |  | Shown in the title bar, usually a file name. |
| maxWidth | `string` |  | Constrain the window, for example "480px". |
| CodeToken kind | `"name" | "keyword" | "string" | "comment"` |  | On CodeToken: picks the matching --code-* colour. Comments are italic. |

## When to use

- A short snippet on a landing page, in a hero or beside a screenshot
- Showing an install command or a few lines of usage

## When not to use

- Long listings or code people copy; there is no copy button or highlighter
- Real syntax highlighting, which belongs to a build-time highlighter

## Notes for agents

- Server component; children are plain text with CodeToken spans, and newlines are literal
- Colours come from --code-plain, --code-name, --code-keyword, --code-string and --code-comment, which flip with the theme
- Window dots use bg-muted-foreground/30, never traffic light colours
- The body scrolls horizontally rather than wrapping

Docs: https://ui.goodtabs.co/components/code-window