# Terminal

> A terminal window that types commands and streams output, with replay and copy.

Component · Free · https://lodeui.com/components/terminal

## When to use

- Install instructions and CLI demos that type themselves out.

## When not to use

- A real shell: use xterm.js.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/terminal.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Terminal } from "@/components/ui/terminal";

export function Install() {
  return (
    <Terminal
      lines={[
        { type: "command", text: "npx shadcn@latest add @lode/button" },
        { type: "progress", text: "Installing", ms: 900 },
        { type: "output", text: "✓ Done", tone: "success" },
      ]}
    />
  );
}
```

## API reference

### Terminal

A terminal window that types commands, runs progress lines and streams output.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| lines | `TerminalLine[]` | – | command, output (with tone) or progress (with ms) lines. |
| title | `string` | `"zsh"` | Window title. |
| animate | `boolean` | `true` | Type and reveal over time. |
| typingSpeed | `number` | `28` | ms per character. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach Replay and Copy |

## Accessibility

- The output is role="log" with aria-live="polite", so lines are announced as they appear.
- Copy copies only the commands.

## Motion

- Characters type in; a cursor blinks; progress lines fill.

## Responsive behavior

- Long lines scroll horizontally.

## Performance

- One timer drives the whole sequence.

## Notes for AI

- Use type="progress" for waits rather than fake output lines.

## Related

- [Code viewer](https://lodeui.com/components/code-viewer) — File tabs, line numbers, highlighted lines, copy and expand, with a dependency-free highlighter.
- [Log viewer](https://lodeui.com/components/log-viewer) — Live log stream with level filters, search and follow mode.