Skip to content

Terminal

In the app

The run log. Light by default, on the fill colour with mono text. The dark variant is the one dark surface in the product, with its own ten-value palette.

@varick/ui/components/terminalAdded 2 Sept 2026

submission-router · run 4f2a
02:00:01Run started on schedule
02:00:02Reading 14 submissions from the shared inbox
02:00:04Matched 11 to carrier appetite
02:00:043 need referral: fleet over 250 units
02:00:09HubSpot lookup timed out, retrying in 5s
02:00:15HubSpot lookup ok on retry
02:00:41Routing notes written for 14 submissions
02:00:41Run complete in 41s

Usage

import { Terminal } from "@varick/ui/components/terminal";

export function Example() {
  return <Terminal title="run 4f2a" lines={run.log} height={260} />;
}

Variants

Dark

submission-router · run 4f2a
02:00:01Run started on schedule
02:00:04Matched 11 to carrier appetite
02:00:09HubSpot lookup timed out, retrying in 5s
02:00:41Run complete in 41s
<Terminal tone="dark" title="run 4f2a" lines={run.log} />

API reference

Every component also accepts className and the native props of its root element.

PropTypeDefaultDescription
tone'light' | 'dark''light'Light sits on the page; dark is the reversed surface for full-screen log views.
linesTerminalLine[]requiredtext, optional time, optional tone: 'muted' | 'ok' | 'error' | 'info'.
titlestring'run.log'The bar caption, mono.
heightnumber220Body height in pixels. The body scrolls.

Accessibility

  • The body is role="log" named by the title. Tone colours sit on the dark ground at 4.5:1 or better; the words carry the meaning.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.terminal { border: 1px solid #1B2233; border-radius: 4px; overflow: hidden; }
.terminal-bar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #161C28; }
.terminal-dots span { width: 10px; height: 10px; border-radius: 50%; background: #2A3244; }
.terminal-title { color: #8B96AA; font-size: 11.5px; font-family: 'Menlo', monospace; margin-left: 6px; }
.terminal-body { background: #0D1119; height: 220px; overflow-y: auto; padding: 12px 14px; font-family: 'Menlo', monospace; font-size: 12px; line-height: 1.7; color: #B7C0CC; }
.terminal-time { color: #4A5468; }
.terminal-ok { color: #6FBF7A; }
.terminal-error { color: #E06B66; }
.terminal-info { color: #7FA6F2; }