Components

Vertical activity/event timeline with status-colored indicators and a compact/default layout variant.

Clickable dashed placeholder card with a label and icon, used to trigger adding a new item.

Pure-SVG radial gauge with a center label, token-driven colors, and progressbar semantics.

Domain-agnostic presentational atoms for dense data surfaces: SectionLabel, MetaBox, EmptyState, TagList, and DataListRow. Pure props-in rendering, composable across any domain.

TanStack-table wrapper with sorting, pagination, column toggle, row selection, and widget-owned loading/empty/error states.

Generic accordion/expandable list with a built-in default row design (severity accent, progress ring, secondary progress bar). Supply renderCollapsed/renderExpanded to replace the row design entirely. Supports loading, empty, and error states.

Icon-only button with an accessible label and optional tooltip.

Vertical connected event timeline showing an elapsed T+ offset from the first event plus an absolute timestamp. Per-event icon, label, and accent resolve from a caller-supplied style map; detail bodies render via a render prop. Domain-agnostic, with empty and loading states.

Generic list renderer with selection, loading skeleton, empty, and error states, and a default/compact layout variant.

List of labeled proportional bars in two densities: inline (label · bar · value breakdowns) and card (header badges + headline value over a full-width bar). Parent supplies the fill fraction and tone, so no scaling or thresholding logic lives in the component.

KPI stat tile with trend delta, severity accent, loading skeleton, and a responsive group layout.

Composable page header with title, description, and left/right action slots.

Reusable pagination controls with page numbers, page size selector, and record count display.

Dense three-zone list card with a rank + confidence arc, header badges, a lifecycle pill chain, and trailing meta blocks. Fully props-driven and domain-agnostic, with an escalation ribbon, urgency/severity accents, selected state, and a loading skeleton.

Generic list renderer with built-in loading, empty, and error states. Ships a default RecordCard row design (rank, progress ring, badges, steps, info blocks) or accepts a custom renderItem/CardComponent.

Master-detail right-side sheet with badges, metrics, assignee, and tabbed sections. Opens via a built-in trigger or a custom one passed in `trigger`.

Item-driven feed row for prioritised work queues: severity and status chips, a stage progress chain, act-by countdown, assignee, and priority score. Takes one flat item and owns every presentation decision, so screens map their domain record and nothing else.

Severity badge with solid and translucent-chip appearances, plus reusable severity color helpers.

Segmented control for switching between view layouts (e.g. grid, list, table), with optional icons and labels per option.

Full page shell: header, collapsible desktop sidebar, and sheet-based mobile drawer composed around your page content.

Collapsible desktop sidebar and sheet-based mobile drawer. Framework-portable: router links and the current path are injected via props.

Generic confirm/cancel dialog for destructive or blocking actions, with default/destructive variants and a confirming (loading) state.

Generic modal container for form content, with confirm/cancel actions, configurable sizes, a submitting (loading) state, and an optional DynamicForm renderer driven by a field config array.

Header-bar action cluster: connection status, theme switch, sound toggle, notifications menu, and user profile menu.

Multi-step wizard shell: header, step indicator, scrollable body, and sticky footer actions.

Two-panel layout with a scrollable navigation list and a main content panel. Includes list item, list header, and empty-detail helper components.

Fully presentational area chart widget using Recharts. Supports multiple areas, stacked areas, custom curve types, fill opacity control, and responsive design.

Fully presentational bar chart widget using Recharts. Supports multiple bars, stacked bars, horizontal/vertical layouts, custom styling, and responsive design.

Fully presentational line chart widget using Recharts. Supports multiple lines, custom styling, legends, tooltips, and responsive layouts.

Fully presentational pie/donut chart widget using Recharts. Supports custom colors, labels, semi-circles, padding angles, and responsive design.

Searchable single-select combobox with async search, infinite loading, clearable selection, and custom option rendering.

Composable toolbar: debounce-ready search input, single/multi-select dropdown filters with removable badges, clear-all, and an action slot.

Generic filter bar composing segmented button groups, dropdown selects, a search input, extra inline controls, a result count, and a refresh action.

Labeled text input with size variants, helper/error text, and common HTML input event handlers.