Component

Terminal

A read-only output console panel for displaying program run output — commands, stdout, stderr, informational summaries, and success / failure lines — in a monospaced, scrollable live region.

Basic run output

A successful run: command, stdout, and a passing summary line. The prompt symbol ( $) is rendered automatically on command lines.

$python solution.pyReading input...Processing 1000 itemsAll tests passed (3/3)

Error output

Stderr lines use the text-destructive token; info lines are muted to de-emphasise the summary.

$python solution.pyRunning test cases...AssertionError: expected [1, 2, 3] but got [3, 2, 1]FAIL test_case_21/3 tests passed

Mixed output

Real-world output is often mixed. Pass a custom promptSymbol (e.g. ❯) to match your shell theme.

❯python solution.py < input.txtCase 1: 42Case 2: 17FAIL Case 3: expected 99, got 100PASS Case 4: 0--- 3/4 tests passed, 1 failed ---

Installation

$pnpm add @refraction-ui/react

Usage

tsx
import { Terminal } from '@refraction-ui/react'
import type { TerminalLine } from '@refraction-ui/react'

const lines: TerminalLine[] = [
  { kind: 'command', text: 'python solution.py' },
  { kind: 'stdout',  text: 'Processing...' },
  { kind: 'success', text: 'All tests passed (3/3)' },
]

export function RunOutput() {
  return <Terminal lines={lines} aria-label="Run output" />
}

Props

PropTypeDefaultDescription
linesTerminalLine[]--Lines to render in order. Each line has `{ id?, kind, text }`. The `kind` field (`command` | `stdout` | `stderr` | `info` | `success`) drives styling.
promptSymbolstring'$'Prompt character(s) prepended to `command` lines, e.g. `$` or `❯`.
maxHeight'sm' | 'md' | 'lg' | 'none''md'Maximum height of the scroll region before the panel becomes scrollable.
aria-labelstring--Accessible label for the live region (e.g. `"Run output"`).
classNamestring--Additional CSS classes to apply to the container.