THEME

MOTION

HAPTIC

SOUND

COMPONENTS

Every primitive in the library. Summaries and prop specs are generated from cathode.manifest.json — the same file the MCP server serves to AI agents, so what you see here is what the robots see.

Accordion

Expand/collapse sections. Controlled via expandedIds + onExpandedChange; `allowMultiple={false}` for exclusive mode.

ActivityBar

Pseudo-random "activity" meter — pixel cells flicker based on a deterministic seed (advance externally to animate).

Avatar

Square identity marker — image, initials fallback, optional status dot.

Badge

Small inline marker for status/state — "NEW", "BETA", "PRO". Display-only; solid (filled) or outline variants.

Breadcrumbs

Path-style navigation. The last item is marked `aria-current="page"` and rendered as static text.

Button

General-purpose button. Variants: default / primary / danger. Supports declarative AI actions.

Card

Generic bordered panel — same chrome as TerminalFrame without the inset title. Use for readouts, info blocks, or grouped form fields where the content speaks for itself.

Chat

First-class AI conversation component with streaming, cancel, and auto-scroll. Wraps a CathodeAIProvider.

Checkbox

Binary form checkbox for multi-select values. Distinct from Toggle; supports indeterminate (tri-state).

Chips

Horizontally scrolling row of tappable preset chips. Supports grouped layouts with dividers.

CodeBlock

Multi-line code sample with optional language label and copy button. Pass `html` for pre-highlighted code (Shiki/Highlight.js).

Countdown

T-minus timer. Renders HH:MM:SS (or DD:HH:MM:SS when > 24h); auto-flips to danger in the final minute.

Counter

Numeric rocker "[−] LABEL VALUE [+]" — fused label/arrows read as one control. (Formerly named Stepper.)

Dialog

Modal with TerminalFrame chrome. Portal-rendered, ESC + backdrop click to close (unless `modal`).

DotLeader

"LABEL …………… VALUE" row — classic terminal readout. Dots fill available width.

Drawer

Slide-in panel anchored to a viewport edge. Non-modal by default; pass `modal` to require explicit close.

FormField

Stacks a label, a Cathode input, and an optional hint or error message. Auto-wires aria attributes.

HazardStripes

Decorative diagonal-stripe overlay for "caution" / "armed" states. Wraps children.

Kbd

Keyboard shortcut indicator — each key in its own bordered box, joined by a separator.

Loader

Indeterminate loading indicator — four pixel-square cells that rise + brighten on a staggered 1s cycle. (Formerly named Spinner.)

Click-triggered dropdown of actions. Keyboard-navigable (ArrowUp/Down, Enter, Escape).

Pagination

Prev/Next arrows + windowed page buttons with ellipses. Controlled: page + totalPages + onChange.

Pill

Icon+text nav/action button. `active` marks the current tab; pass an icon node for the icon+text treatment.

PixelBar

Discrete-cell horizontal level meter. Fill proportional to `level` (0–1).

Popover

Anchored floating panel, click to open. Closes on outside click / Escape.

ProgressBar

Continuous horizontal bar for determinate progress. Omit `value` for an indeterminate shimmer.

PulsingDot

Small square that pulses to signal "active/listening" without a full progress indicator.

RadioGroup

Single-select from 2+ options. Renders native radios under the hood; browser handles keyboard arrow-nav.

ScanLine

Decorative CRT scan-line overlay. Wraps children with a translucent grid + a sweeping beam.

SearchBar

Monospace search input. With `ai={{ semantic: true }}` routes query + items through provider.act("search", …) for AI ranking.

Select

Single-select dropdown for a finite option set. Wraps native <select> for a11y + mobile-picker compatibility.

SignalBars

Cellular/wifi-style ascending bars. Use for strength, battery, or any 1-of-N reading.

Skeleton

Placeholder block with a shimmer, used while content loads. Compose multiples to mirror the final layout.

Stack

Utility flex wrapper — direction, gap, alignment in one prop surface. No visual chrome.

StatusTile

MPC-style tile: icon + uppercase title + tiny subtitle. Optional tappable.

Table

Terminal-style tabular display. Controlled sort via onSortChange; optional row-click with keyboard support.

Tabs

Horizontal tabs where exactly one is active. Controlled via value + onChange.

Tag

Accent-colored outlined marker for keywords, filters, or classifications. Optional `onRemove` renders a trailing × button.

TerminalFrame

Bordered box with a small inset title — the "┌─ PEERS ─" terminal look. Use to group related readouts.

TextArea

Multi-line monospace text input. Resize handle disabled by default to match the terminal chrome.

TextField

Monospace text input. With `ai={{ suggest: true }}` shows ghost-text AI completions (Tab to accept).

Toast

Inline status notification. Controlled via `visible`; apps handle queuing/timing.

Toggle

Binary on/off switch with square-cornered track and accent fill when on.

Tooltip

Hover/focus-triggered hint. Text-only; wraps a focusable child and injects aria-describedby.

TypewriterText

Character-by-character reveal animation. Respects `prefers-reduced-motion` by rendering the full text immediately.

Auto-generated from manifest

Want the raw data? cathode.manifest.json ships at the root of the repo and is the authoritative description of every component. It validates against a JSON Schema published at https://cathode-ui.dev/manifest.schema.json (placeholder URL).