Standard Data

A list of async job rows with a colour-coded status badge, an indeterminate progress shimmer while a job is in flight, and a two-click armed delete so a slip of the finger can't discard work.

React

Two-month booking calendar with per-date availability dots.

React

primary-* / accent-* with your own colour scale.

Astro

A list of data-source sync bindings — last-synced time, row count, cache TTL, and an inline Resync action.

React

primary-* / accent-* with your own colour scale.

Astro

A ranked market-movers / scanner list: rank, symbol, price, a colour + arrow-coded change badge, a gainers/losers toggle, a filter chip, and a per-row watch action.

React

primary-* / accent-* with your own colour scale.

Astro

primary-* / accent-* with your own colour scale.

Astro

A query-builder for data tables — stack field/operator/value condition rows and combine them with a shared AND/OR joiner, so users compose multi-condition filters without writing a query language.

React

A compliance-grade record of who did what and when, grouped under calendar-day headers with a severity tag per row and a details disclosure that reveals the structured change data only when someone needs it — built for security and admin audit trails, not a social activity stream.

Astro

StandardBulkAssignBar — the docked bar that appears once rows are selected and routes them all to one owner, one date, in one action.

React

Checkbox row selection for a data table with a correctly indeterminate select-all, a live selected count, and a contextual action bar that appears only once something is selected, so bulk edit, export, or delete never need a separate mode.

React

Turns a truncated table cell into a focus-trapped popover showing the full value with a one-click copy button, so long IDs, JSON blobs or notes never need their own column width.

React

A settings popover for showing or hiding table columns, with the chosen layout remembered between visits so people don't have to rebuild their view every time they come back.

React

A horizontal heat-intensity bar chart for coverage or activity density — one bar per label (day, region, team) coloured by how close its value is to `max`.

React

StandardCoverageMeterList — one row per region (or team, or queue) showing how much of its demand is actually covered, against a target line.

React

Shows when a dataset was last updated in plain words, flags it as stale past a threshold you set, and exposes a Refresh action — so a dashboard never leaves a viewer guessing whether the numbers on screen are current.

Astro

Shimmering placeholder rows sized to match the real table's columns, so a data grid has zero layout shift the moment live rows arrive.

Astro

StandardDayPlanTimeline — one person's day on a single hour rail, with the gaps drawn as first-class blocks rather than empty space.

React

Semantic record details in stacked or two-column layouts with optional field hints and empty-value text.

Astro

An icon, headline, short explanation and a primary action for the moment a table or list has nothing in it — so empty is a prompt, not a dead end.

Astro

A data table for hierarchical records — folders, org charts, category trees — where any row can expand to reveal its children in place, indentation and a disclosure arrow showing depth without leaving the spreadsheet-like layout.

React

A single export button that turns into a determinate progress bar while the job runs, then resolves into a download link or an inline retryable error — so long exports never leave users staring at a frozen button.

React

Active filters shown as removable chips with a clear-all action, wrapping to extra rows instead of scrolling off so long filter sets stay scannable.

React

StandardGeocodeStatusBadge — the small inline indicator for "do we actually know where this is?", plus an optional batch progress bar for the run that resolves a whole list.

React

A data table whose rows collapse into named groups, each with its own subtotal row and a grand total footer — the spreadsheet-pivot view buyers expect for cohort, region, or category reporting without a pivot-table library.

React

Responsive SVG histogram for numeric arrays with configurable bins, accessible summary, labelled counts, and no chart dependency.

Astro

Lets people map columns from an uploaded file onto your destination fields, with a sample value per column and clear wording for anything left unmapped or assigned twice — so an import gets caught before it runs, not after it fails.

React

Edit a data grid in place: click or press Enter to open a cell, Tab commits the change and advances to the next field, Escape cancels back to the original value. No drawer or dialog round trip for quick corrections.

React

StandardJobSchedulingBoard — a column-per-day (or per-crew, or per-stage) board for moving work between buckets, with capacity shown on each column header rather than discovered after the drop.

React

Expandable nested JSON inspector with type-aware values, configurable initial depth, and native keyboard-operable disclosure buttons.

React

StandardMapLayerToggles — the row of pills that sits over a map or canvas and switches overlays on and off.

React

Label/value rows for an object detail view — IDs, keys, timestamps — with a one-click copy button on every value so nobody has to select-and-drag.

React

StandardOpsStatBanner — the headline row for a wall-mounted or always-open ops dashboard: a handful of numbers, each with its trend and its share of a target, sized to be read from across a room.

React

Page navigation with a rows-per-page selector and a live "showing X-Y of Z" readout, so users can jump pages or change density without losing their place.

React

The strip above a results table that states what the query returned — row count, how long it took, and the filters applied — so people trust the table below without re-reading every filter chip themselves.

Astro

StandardRankedSlotCard — a ranked list of suggested options with a commit button on each, and a per-card state machine for the commit.

React

The top banner of any single-record page — title, identifiers with one-click copy, a status pill, and the primary and secondary actions for that record — so every detail view opens with the same orientation cues instead of a bespoke header each time.

React

A draggable two-pane split layout — e.g.

React

StandardRoutePlanList — an ordered list of stops on a route, with the travel leg drawn between them rather than stated beside them.

React

A ranked list of scheduling recommendations for a new stop — e.g.

React

A drag-to-reorder list of rows with a full keyboard equivalent — Alt+Up/Down or move buttons — and a spoken position announcement on every move, for ordered data like pipeline stages or priority queues.

React

A dropdown for switching between named table views, with save-current-as-new and rename-in-place built in, so users can keep several filtered/sorted layouts ready without rebuilding them each time.

React

Click any column header to sort a dataset ascending or descending, with a sticky header and its own horizontal scroll so wide tables never widen the page on mobile.

React

StandardStaffAvailabilityGrid — people down the side, days across the top, one editable cell per person per day.

React

Weekly staff-by-region availability grid: one row per staff member, one micro-cell per morning/afternoon/evening period per day, shaded by utilization — the shape a booking/dispatch admin reaches for instead of a spreads

React

A compact status strip for an ops dashboard reporting the health of each backing integration — connected, degraded, or down — plus a last-updated timestamp and any standing warning notes.

React

StandardTerritoryLegend — the key for a choropleth or status-banded map.

React

StandardTerritoryMap — a choropleth territory map drawn as plain inline SVG.

React

Shows exactly what changed between two blocks of text — side-by-side or as a single unified list — with every added or removed line carrying a glyph and a screen-reader label so the change is readable without relying on colour.

Astro

StandardTimeSlotHeatGrid — a days x time-slots grid shaded by how good each slot is, for picking when to schedule something rather than reading what is already scheduled.

React

A three-light RAG (red/amber/green) verdict indicator, drawn as inline SVG so it never depends on an icon package.

React

A single trade/position row for a journal or positions list — ticker, open/closed status, flip count, entry/current/hold mini-grid and a colour + arrow-coded P&L, with a `compact` variant for dense list views.

React

Scrollable transcript with a timestamp and speaker per line.

React

A compact watchlist card — symbol, name, price, a colour + arrow-coded change badge, and an inline SVG sparkline built from a plain number array.

React

A horizontal day-strip selector paired with an agenda list for whichever day is active — the "pick a day, see what's on it" pattern scheduling and booking apps reach for instead of a full month grid.

React