React Terminal Console
A serial-console and log-viewer component in the style of a UART bring-up session: kernel-style timestamps, severity-colored lines (ok / warn / error / debug), a connection LED in the header, autoscroll, one-click copy, and an optional command prompt wired to your handler. The body is intentionally dark in both themes — consoles are dark; that is the convention engineers trust.
/dev/ttyUSB0 — 115200 8N1CONNECTED
axm330>
Try help, status, temp.
Installation
npx shadcn@latest add terminal.json
Usage
Loading...
Design notes
- Whole-line severity color — like real consoles, the message line carries the color; timestamps stay dim so the eye can scan the log column.
- Controlled log —
linesis plain props data; stream, filter, or persist it however your app does. The demo replays a boot log and answers a few commands. - Autoscroll — the body follows the newest line; disable with
autoScroll={false}for forensic reading.
Props
Terminal
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | TerminalLine[] | — | Log lines, oldest first |
| title | string | console | Header label, e.g. port and framing |
| prompt | string | — | Renders an input row with this prompt when set |
| onCommand | (cmd: string) => void | — | Called when Enter is pressed in the prompt |
| connected | boolean | true | Drives the header LED and label |
| height | number | 300 | Body height in pixels |
| autoScroll | boolean | true | Keep the newest line in view |
TerminalLine
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Line content |
| time | string | — | Timestamp shown in brackets |
| level | 'info' \ | 'ok' \ | 'warn' \ |