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 "http://localhost:3000/registry/terminal.json"

Usage

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 — lines is 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' \