~/docs/custom

▚Custom components

Built on @opentui/react — composition over inheritance. No native code, no extend() ceremony: every component below is a plain function component using <box>, <text>, and the useKeyboard / useTimeline hooks. Source in lib/custom/, runnable in examples/custom/.

data-viz 11 feedback 3 input 3 layout 2 display 1 agentic 6

⌕

~/components/data-viz

Charts and plots rendered in character cells — line, bar, pie, gauge, heatmap and more.

▸LineChart

Multi-row line chart with gradient fill, reveal and crosshair

▸AreaChart

LineChart with a stronger under-line gradient

▸Sparkline

Mini time-series chart with gradient fill, dot and reveal

▸BarChart

Vertical bars with gridlines, value and category labels

▸PieChart

Solid disc colored by share with legend

▸RingChart

Donut with a centered total and legend

▸Gauge

Semicircle arc with warn/danger zones and needle

▸Heatmap

Background-colored matrix with labels and gradient legend

▸CandlestickChart

OHLC candles with wicks, up/down colors and index labels

▸ScatterChart

Multi-series dot plot with gridlines and legend

▸FunnelChart

Centered shrinking bars with per-stage gradient and percent

~/components/feedback

Progress, status and notification primitives that keep the user informed.

▸ProgressBar

Animated progress bar with label and percentage

▸Badge

Tone-colored status pill built from box + text

▸Toast

Toast provider with queue, tones, and auto-dismiss

~/components/input

Keyboard-driven interactive controls: editors, trees, dialogs.

▸TreeView

Keyboard-navigable tree with expand/collapse

▸Modal

Dimmed overlay dialog with focus on the panel

▸Textarea

Multiline text input with cursor

~/components/layout

Structural helpers for arranging terminal UI.

▸Grid

Flexbox rows of equal-width cells

▸Divider

Horizontal rule with optional label

~/components/display

Presentational one-offs that render read-only content.

▸QRCode

QR code rendered from real bytes

~/components/agentic

Building blocks for AI-agent CLIs: spinners, tool calls, approvals, token meters.

▸AgentSpinner

Neomorphic status line with spinner, sub-task and elapsed timer

▸StatusBar

Agent bottom bar: mode, model, task, clock and token counter

▸ToolCall

Invocation card: state glyph, args, duration and collapsible output

▸ApprovalPrompt

Permission dialog with keyboard yes/no and selection state

▸TokenMeter

Context window usage bar with zone colors and io stats

▸StepList

Session plan tracker: pending → running → done with live spinner

##Usage pattern

Components import like any React module. Stateful ones (Toast, Modal) expose context or props; presentational ones (Badge, Sparkline, ProgressBar) render from props only:

tsxapp.tsx

1import { createCliRenderer } from "@opentui/core"
2import { createRoot } from "@opentui/react"
3import { Badge, ProgressBar, ToastProvider } from "termino"
4
5function App() {
6  return (
7    <box border title="dashboard" style={{ padding: 2, flexDirection: "column", gap: 1 }}>
8      <box flexDirection="row" gap={1}>
9        <Badge label="prod" tone="red" />
10        <Badge label="ready" tone="green" prefix="● " />
11      </box>
12      <ProgressBar label="deploy" value={64} />
13    </box>
14  )
15}
16
17const renderer = await createCliRenderer()
18createRoot(renderer).render(
19  <ToastProvider>
20    <App />
21  </ToastProvider>,
22)

Run any example in a real terminal:

bashterminal

1$ bun examples/custom/tree-view.tsx     # keyboard tree
2$ bun examples/custom/progress-bar.tsx # animated bars
3$ bun examples/custom/toast.tsx        # space to push toasts