Skip to content
ztui ztui

Widget Gallery

Every widget below is shown with a screenshot generated from its gallery demo on the browser/canvas backend (via bun run docs:screenshots) — so the images can’t drift from the components. Each page links to the full runnable demo in the repo.

ztui ships ~80 components across eight categories, including a dedicated Agent Kit for building terminal AI agents. This gallery is filling in batch by batch.

Agent Kit

Section titled “Agent Kit”

Composable primitives for terminal AI agents — a chat shell, message bubbles, tool-call cards, a permission gate, and the status pieces of a turn.

  • Agent (full example) — the whole kit working end to end: a mini coding agent in one Conversation.
  • Conversation — the agent chat shell: a tail-following transcript with a docked composer.
  • Chat Bubble — a message bubble with a sender-coded one-sided accent bar.
  • Model Picker — a filterable table list of LLMs with cost badges and reasoning / local-remote icons.
  • Tool Calls — collapsible tool-call cards and a per-tool renderer registry.
  • Approval Prompt — single/batch permission gates with pattern grants.
  • Reasoning & Streaming — a collapsible thinking block and a blinking-caret stream.
  • Task List & Tree — a flat checklist and its nested-plan sibling.
  • Usage Meter — token usage, cache ratios, cost, and a context-window bar.
  • Chips & Pills — inline tags, status pills, and clickable file citations.

Controls

Section titled “Controls”
  • Button — clickable, focusable button.
  • Button Group — arrow-navigable toolbar of buttons (a single Tab stop).
  • Input — single-line text field with icons and validation.
  • Checkbox — labelled boolean checkbox.
  • Switch — on/off toggle switch.
  • Select — single/multi-select dropdown.
  • Slider — numeric range slider.
  • Radio Group — single-choice radio group.
  • Toggle Button — button with a pressed state.

Data

Section titled “Data”
  • Table — virtualized, sortable data grid for huge row sets.
  • Tree — virtualized navigation/file tree.
  • List View — a scrollable, selectable single-column list.
  • Selection List — a multi-select checklist.
  • Sparkline — compact inline trend chart.
  • Diff — unified/split text diff with syntax highlighting.
  • Rich Log — append-only, auto-scrolling log view.
  • Terminal View — sandboxed ANSI terminal pane.
  • DevTools — a React-DevTools-style widget-tree inspector + render profiler.

Text & input

Section titled “Text & input”
  • Markdown — render (and stream) Markdown with highlighted code.
  • Rich Text — inline-markup styled text in one element.
  • Text Area — multi-line editor with gutter and validation.
  • Chat Input — chat composer with chips, completions, ghost-text, and a send/stop affordance.
  • Form — validating container that aggregates its fields.
  • Question / Answer — single/multi-choice prompt.

Feedback

Section titled “Feedback”

Layout

Section titled “Layout”
  • Collapsible — a titled, toggleable disclosure section.
  • Tabs — tabbed container showing one panel at a time.
  • Split View — recursively splittable, resizable panes.
  • Overlays — modal dialogs and floating panels.
  • Workbench — VS Code-style dockable layout.

Media

Section titled “Media”
  • Image — inline raster/SVG images with graceful fallback.
  • HeroIcon — Heroicons as crisp, theme-tinted vectors.
  • File Icon — VS Code-style Seti file-type icons.