# Terminal frame (goodtabs UI)

A terminal window with prompt lines, coloured with the code tokens.

## Install

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

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

## Usage

```tsx
import { TerminalFrame, TerminalLine } from "@/components/ui/terminal-frame"

<TerminalFrame title="~/app">
  <TerminalLine prompt="$">npm run dev</TerminalLine>
  <TerminalLine kind="string">Ready in 312ms</TerminalLine>
</TerminalFrame>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` |  | Centered in the title bar, for example a path or shell name. |
| maxWidth | `string` |  | Constrain the window, for example "480px". |
| prompt | `string` |  | On TerminalLine: a leading marker such as $, hidden from assistive tech. |
| kind | `"plain" | "name" | "keyword" | "string" | "comment"` |  | On TerminalLine: picks the matching --code-* colour. |

## When to use

- Showing a command and its output on a landing page or in docs
- Beside a screenshot to show the install step

## When not to use

- A real, interactive terminal
- Code people copy; there is no copy button

## Notes for agents

- Server component; each line is a TerminalLine and whitespace is preserved
- Colours come from the --code-* tokens, 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/terminal-frame