Terminal View · paneui

$ pnpm vitest run

✓ src/split-pane.test.ts (12 tests)

✓ src/chat-surface.test.ts (34 tests)

✗ src/drag-preview.test.ts (1 failed)

Test Files 1 failed | 2 passed

main ✓ 46 ✗ 1 node 22

Installation

pnpm dlx shadcn@latest add @paneui/terminal-view

Usage

import { Terminal, TerminalInput, TerminalOutput, TerminalStatusLine } from "@/components/ui/terminal-view"

<Terminal className="h-80">
  <TerminalOutput text={output} />
  <TerminalInput onSubmit={run} />
  <TerminalStatusLine text={status} />
</Terminal>

Composition

Terminal
├── TerminalOutput
├── TerminalInput
└── TerminalStatusLine

Examples

Progress

Use for installs and downloads whose progress lines rewrite in place.

Embedded

ANSI

TerminalOutput parses SGR colour codes plus bold, dim, italic, underline and inverse; 256-colour and 24-bit colours map to the nearest base colour. Colours map to theme tokens (red → destructive, green → success, yellow → warning, blue → primary, magenta / cyan → chart colours), so output follows the theme and accent. A carriage return rewrites the current line, and cursor movement and OSC sequences are dropped. parseAnsi and stripAnsi are exported.

Following

Output stays pinned to the end while it grows, until the reader scrolls up; scrolling back to the bottom re-attaches. The log is role="log" with polite announcements.

History

TerminalInput keeps submitted commands, and ↑ / ↓ walk back and forward through them.

API Reference

Terminal

Also accepts every prop of div.

variant= "default": "default" | "embedded"; Full panel surface or compact inset well.

Prop	Type	Default	Description
variant	"default" \| "embedded"	"default"	Full panel surface or compact inset well.

TerminalOutput

Also accepts every prop of div.

text*: string; Raw output with ANSI escape codes.
follow= true: boolean; Stick to the end while new output arrives.
wrap= true: boolean; Wrap long lines instead of scrolling sideways.

Prop	Type	Default	Description
text*	string	—	Raw output with ANSI escape codes.
follow	boolean	true	Stick to the end while new output arrives.
wrap	boolean	true	Wrap long lines instead of scrolling sideways.

TerminalInput

Also accepts every prop of input.

prompt= "❯": ReactNode; Glyph before the input.
onSubmit: (command: string) => void; Called on Enter; the input clears.

Prop	Type	Default	Description
prompt	ReactNode	"❯"	Glyph before the input.
onSubmit	(command: string) => void	—	Called on Enter; the input clears.

TerminalStatusLine

Also accepts every prop of div.

text: string; ANSI text to render; otherwise children.

Prop	Type	Default	Description
text	string	—	ANSI text to render; otherwise children.