@sandbox/ui

Terminal Noir

A premium dark design system for data-dense interfaces. 12 components built for terminal aesthetics, real-time data, and developer tools.

React 18+

Tailwind CSS 4

TypeScript

⌘K

Terminal Noir v1.0 · 12 Components · 5 Accent Colors · Dark Mode Only · Cloudflare Pages · Zero Runtime Dependencies · Departure Mono · Terminal Noir v1.0 · 12 Components · 5 Accent Colors · Dark Mode Only · Cloudflare Pages · Zero Runtime Dependencies · Departure Mono ·

Terminal

Scrollable command output display with optional line-by-line animation and scanline overlay.

Animated output

Static output

1System diagnostics:

2 CPU: 4 cores @ 3.2GHz

3 Memory: 16GB DDR5

4 Storage: 512GB NVMe

5 Network: 1Gbps symmetric

Prop	Type	Default	Description
lines	string[]	—	Array of text lines to display
animate	boolean	false	Animate lines appearing one by one
maxHeight	string	"400px"	Max height before scrolling
className	string	—	Additional CSS classes

example.tsx

<Terminal
  lines={["$ echo hello", "hello"]}
  animate
  maxHeight="240px"
/>

CommandBar

Floating command palette activated with ⌘K. Try it — press ⌘K or Ctrl+K now.

Interactive — press ⌘K to open

Last command:(none)

Prop	Type	Default	Description
onSubmit	(cmd: string) => void	—	Called when user presses Enter
placeholder	string	"Type a command…"	Input placeholder text
prefix	string	"> "	Prompt prefix character
className	string	—	Additional CSS classes

example.tsx

<CommandBar
  onSubmit={(cmd) => console.log(cmd)}
  placeholder="Search components..."
  prefix="λ "
/>

DataGrid

Sortable data table with striped rows and column alignment. Click headers to sort.

Service monitor

Service	Status	Latency (ms)	Uptime
api-gateway	● healthy	12	99.99%
auth-service	● healthy	8	99.95%
data-pipeline	◌ degraded	145	98.20%
cdn-edge	● healthy	3	100.0%
websocket-hub	● healthy	22	99.87%

Prop	Type	Default	Description
columns	Column[]	—	Column definitions with key, label, width, align
data	Row[]	—	Array of row data objects
onSort	(col: string) => void	—	Called when a column header is clicked
className	string	—	Additional CSS classes

example.tsx

<DataGrid
  columns={[
    { key: "name", label: "Name" },
    { key: "value", label: "Value", align: "right" },
  ]}
  data={[
    { name: "Latency", value: 12 },
    { name: "Throughput", value: 450 },
  ]}
  onSort={(col) => console.log("Sort by", col)}
/>

StatusBar

Fixed-position bottom bar with left/right content zones and variant styles.

Default variant

● Connected to us-east-1

v2.4.1 | 3 workers

Warning variant

⚠ High memory usage detected

87% utilized

Error variant

✕ Connection lost

Retrying in 5s...

Prop	Type	Default	Description
left	ReactNode	—	Content for the left zone
right	ReactNode	—	Content for the right zone
variant	"default" \| "warning" \| "error"	"default"	Visual style variant
className	string	—	Additional CSS classes

example.tsx

<StatusBar
  variant="warning"
  left={<span>⚠ High memory usage</span>}
  right={<span>87% utilized</span>}
/>

Meter

Horizontal progress bar with tick marks, percentage display, and accent color glow.

All accent colors

CPU Usage

85%

Memory

62%

Disk I/O

91%

Error Rate

23%

Uptime

99%

Custom max value

Requests / sec

75%

Prop	Type	Default	Description
value	number	—	Current value
max	number	100	Maximum value
label	string	—	Label text displayed beside the bar
color	AccentColor	"indigo"	Bar fill color: indigo \| cyan \| amber \| rose \| lime
className	string	—	Additional CSS classes

example.tsx

<Meter
  value={85}
  label="CPU Usage"
  color="indigo"
/>

RadialGauge

Circular SVG gauge with animated arc draw, value display, and glow effect.

Multiple gauges

Uptime

Latency

Deploys

Errors

Load

Different sizes

Prop	Type	Default	Description
value	number	—	Current value
max	number	100	Maximum value
label	string	—	Label below the gauge
size	number	120	SVG size in pixels
color	AccentColor	"cyan"	Arc color: indigo \| cyan \| amber \| rose \| lime
className	string	—	Additional CSS classes

example.tsx

<RadialGauge
  value={97}
  label="Uptime"
  color="lime"
  size={120}
/>

MatrixCard

Signature container with subtle grid dot pattern and hover glow. The foundation of Terminal Noir layouts.

Glow colors

glow

indigo

glow

cyan

glow

amber

glow

rose

glow

lime

hover

disabled

Content container

System Status

All services are operating normally. Last checked 30 seconds ago.

Operational

Prop	Type	Default	Description
children	ReactNode	—	Card content
hover	boolean	true	Enable hover glow effect
glow	AccentColor	"indigo"	Glow color on hover
className	string	—	Additional CSS classes

example.tsx

<MatrixCard glow="cyan">
  <div className="p-6">
    <h3>Card Title</h3>
    <p>Card content goes here.</p>
  </div>
</MatrixCard>

Ticker

Horizontal scrolling marquee for live data feeds. Seamless loop, pauses on hover.

Live data feed

API: 12ms p99 · Uptime: 99.99% · Deploys today: 47 · Active workers: 128 · Edge regions: 34 · Requests/sec: 14.2k · API: 12ms p99 · Uptime: 99.99% · Deploys today: 47 · Active workers: 128 · Edge regions: 34 · Requests/sec: 14.2k ·

Fast speed

BTC $67,420 | ETH $3,891 | SOL $142.50 | DOGE $0.089 | BTC $67,420 | ETH $3,891 | SOL $142.50 | DOGE $0.089 |

Prop	Type	Default	Description
items	string[]	—	Array of text items to scroll
speed	number	30	Scroll speed in characters per second
separator	string	" · "	Separator between items
className	string	—	Additional CSS classes

example.tsx

<Ticker
  items={["API: 12ms", "Uptime: 99.99%"]}
  speed={30}
/>

KeyBadge

Keyboard key cap rendering for shortcuts and hotkey hints.

Common shortcuts

⌘KCommand palette

⌘⇧PQuick actions

EscClose

CtrlCInterrupt

Prop	Type	Default	Description
keys	string[]	—	Array of key labels, e.g. ["⌘", "K"]
className	string	—	Additional CSS classes

example.tsx

<KeyBadge keys={["⌘", "K"]} />

Toast

Notification toasts with auto-dismiss progress bar. Uses a Provider + useToast() hook pattern.

Click to trigger

Prop	Type	Default	Description
message	string	—	Toast notification text
variant	"info" \| "success" \| "warning" \| "error"	"info"	Visual style and color
duration	number	4000	Auto-dismiss time in ms

example.tsx

// Wrap app with <ToastProvider>
const { toast } = useToast();

toast("Deploy complete!", {
  variant: "success",
  duration: 4000,
});

TreeView

File explorer-style tree with collapsible nodes, ASCII connectors, and selection state.

Interactive file tree

Selected: (none)

Prop	Type	Default	Description
items	TreeItem[]	—	Tree data with id, label, optional children and icon
onSelect	(item: TreeItem) => void	—	Called when a node is clicked
className	string	—	Additional CSS classes

example.tsx

<TreeView
  items={[
    {
      id: "src",
      label: "src",
      icon: "📁",
      children: [
        { id: "index", label: "index.ts", icon: "📄" },
      ],
    },
  ]}
  onSelect={(item) => console.log(item.label)}
/>

PresenceDot

Pulsing status indicator for presence, health, and connectivity states.

All statuses

online

away

busy

offline

Sizes

In context

api-gatewayonline

auth-serviceonline

ml-pipelineaway

staging-dbbusy

legacy-apioffline

Prop	Type	Default	Description
status	"online" \| "away" \| "busy" \| "offline"	—	Presence status determining color and animation
size	"sm" \| "md" \| "lg"	"md"	Dot size
className	string	—	Additional CSS classes

example.tsx

<PresenceDot status="online" size="lg" />