Skip to main content
Overview

The hard screens, one system.

React components for dashboards, data grids, AI chat, node canvases, maps, editors and process maps — on one token system, and legible to coding agents.

claude mcp add --transport http brand-ui https://elabs-ai.com/mcp
01 / Templates

What are you building?

Every kind of screen below is a real template in the library. Open one to see it full size, the blocks and components it is made of, and the command that scaffolds it.

For teams running AI agents in production

Agent Operations Center

A control room for agents in production: spend, traces, reviews and the audit log.

  • Overview
  • Runs
  • Review queue
  • Audit log
  • Agents
  • Budgets
  • Guardrails
  • Evaluations

3 examples

For revenue, finance and BI teams

Revenue against plan, the pipeline behind it and an analyst on call.

1 example

For supply-chain, fleet and field-operations teams

Open exceptions, the network map and the shipment behind every late promise.

1 example

For account, success and CRM products

One account before the call: health, usage, people and next actions.

1 example

For support, service and helpdesk products

A ticket queue, the conversation and a reply drafted from past tickets.

1 example

For reliability, observability and platform teams

One live incident: error rate, blast radius and a runbook that runs.

1 example

For utilities, industrial energy managers and grid operators

Eight sites on the grid: who buys above contract, the alarms and an analyst over the meters.

2 examples

For security operations teams, incident responders and detection engineers

The alert queue, the assets it fires from and an analyst waiting for the go to contain.

2 examples

For pricing, trading and treasury products

A market tape, a watchlist and an order ticket with a review step.

1 example
02 / Blocks

Blocks

Copy-own compositions from the registry: command centers, maps, infographics, KPI cards, agent-ops panels. Installed with one command, then yours to edit.

Command Centers · Live Ops WallWhat is happening right now, and what needs me?

How is the quarter going, and what decides it?

A revenue desk in one block: a MetricGrid of four headline numbers that each name their baseline and carry a 13-week Sparkline, a ComposedChart of weekly revenue with its trailing average against a labelled plan rule, a donut PieChart of the service-line mix, a BumpChart of which line is climbing, and the accounts that decide the quarter with a Meter each. Container-query layout, so it holds in a dashboard column and on a full page.

4 examples

Where does the volume flow, and which lane is late?

A network on the map it runs on: MapCanvas in globe projection with one MapArc per lane, its width bound to volume through a paint expression, hubs as MapMarkers with tooltips, and a panel that ranks the lanes with a Meter and calls out the late ones. Selecting a lane on the map or in the list dims the rest and redraws that arc heavier.

3 examples

Where do they drop off?

"Where do they drop off?" — a SankeyChart from the channel a request came in on, through what happened to its quote, to how it ended, with a FunnelChart beside it that counts each step. The headline names the channel that loses the largest share of its own requests.

2 examples

What did the agent do, and what is it asking me?

One agent run, reviewable end to end: a Plan with its decision contract, an AgentTimeline whose last step follows your answer, a Tool call with arguments and result one click away, a ToolResultCard hosting the chart the run produced, TokenUsage in the header and an ApprovalCard for the one side effect that waits for a human. Reports the decision through onDecision and never performs it.

2 examples

Where is everyone, and who is late?

A fleet where it is: each vehicle's planned route as a dashed MapRoute, the part already driven solid, the vehicle's MapMarker at the join and the depot marked; the list shows stops done on a Meter and minutes against plan, and selecting a vehicle fades the others.

2 examples

Where is the market, and what moved it?

A rate desk: a tape of lanes across the top with price, move and a 20-day Sparkline each, over a CandlestickChart of the index and a BarChart of daily volume. Every move carries an arrow and a sign as well as a colour; the chart title is computed from the first open and the last close.

2 examples
03 / Charts

Charts

Every chart container the library ships, drawn from one fictional company's quarter. Line, bar and pie are here; so are bump, waterfall, dumbbell, heatmap, treemap and sankey.

Several series over time

Line chart, 3 series over Jul 3, 2026–Sep 25, 2026; EMEA peaks at 5.7 in Sep 25, 2026

Volume over time

Area chart, 2 series over Jul 3, 2026–Sep 25, 2026; EMEA peaks at 5.7 in Sep 25, 2026

Two linked measures

Rank over time

A few categories, compared

Bar chart, 3 series over EMEA–LATAM; renewal peaks at 1,007 in EMEA

Two points per category

A bridge between totals

One entity, several dimensions

Share of a whole

Pie chart, 4 slices; largest: Ledger at 38 (38%)

Several progress values

Hierarchy and share

Four product families, two modules each, sized by ARR.

Stage-to-stage drop-off

Category by category

Colour scale: 5 steps from 0 to 63.zero

Every record, by group

EMEA: 48 records, median 23.5, IQR 10.575 (16 to 26.575); AMER: 48 records, median 24.05, IQR 10.1 (20.425 to 30.525); APAC: 48 records, median 30.65, IQR 16.15 (19.85 to 36); LATAM: 48 records, median 35.05, IQR 32.625 (19.825 to 52.45)
04 / Maps

Maps

Token-themed MapLibre: markers, clusters, routes, arcs, GeoJSON regions and a globe, all following the active theme.

05 / Components

Components

The app UI underneath: forms, overlays, navigation, tables, chat parts. Source-owned, token-driven, keyboard-complete.

Annual recurring revenue
$41.5M+$3.2M

since the start of the quarter

Invite a teammate

They get access to this workspace's dashboards.

EMEAAMER
Solid: this yearFaint: last yearShaded: normal rangeDashed: target pace
Orders shippedQ3 (Jul–Sep)
6.3K

Quarter-to-date total

712

Weekly, last 13 weeks

vs same week last year
660+52(+7.9%)

As of Aug 31, 09:40 AM · Source: ERP

Avg delivery timeQ3 (Jul–Sep)
36.2 h
36.2 h

Weekly, last 13 weeks

vs same week last year
34.5 h+1.7 h(+4.9%)

As of Aug 31, 09:40 AM · Source: ERP

NPSQ3 (Jul–Sep)
42
42

Weekly, last 13 weeks

vs same week last year
38+4(+10.5%)

As of Aug 31, 09:40 AM · Source: ERP

Recent orders

The five most recent orders this quarter.

Lumenwood Media Ltd.$25,965paid
Silvergate Media Ltd.$19,004paid
Copperdale Provisions Inc.$8,329paid
Rowanmere Provisions Ltd.$10,933refunded
Sterlingmoor Health Inc.$15,694paid
Logo churn
4.7%+1.7 pts

since the start of the quarter

Forecast settings
Confidence interval80%
Rate this forecast
Nightly revenue sync
ExtractComplete
ReconcileRunning
PublishPending
Workspace members

People with access to Ledger Insights.

PR
Priya Ramanathanpriya.ramanathan@ashgrove.example
owner
OL
Owen Lindqvistowen.lindqvist@ashgrove.example
admin
FH
Fatima Haddadfatima.haddad@ashgrove.example
admin
MB
Marcus Bellomarcus.bello@ashgrove.example
member
Reporting period

Pick the range every chart reads.

September 2026
On-time deliveryQ3 (Jul–Sep)
91.4%
90%95% target
Off trackAt riskOn track
vs target
95%−3.6pp
At riskfor 6 weeks

As of Aug 31, 09:40 AM · Source: ERP

07 / Agents

Built for coding agents

A CLI, an MCP server and a machine-readable manifest tell an agent which component to use and how. For screens an agent designs at runtime, it emits JSON that the library validates and renders.

98 convention rules run in CI

Let the agent emit the UI

Edit what an agent would emit, and watch it validate and render

The editor runs the library’s own validator on every pause in your typing. The errors below it are the validator’s, word for word.

A surface the agent designs at runtime, validated against the catalog, rendered by the library.

brand-ui a2ui schema
08 / Themes

Themes

One token system. Swap a stylesheet and every component follows.

8 reference families

Reference themes, ready to use as they are — or as a start for your own.

Default

System stack

Claude

System stack

ClickHouse

System stack

Graphite

System stack

Heap

System stack

Ocean

System stack

Qlik

Source Sans 3, vendored

Salesforce

System stack

Snowflake

System stack

Bring your own brand

An agent with the brand-ui-create-theme skill turns a brand’s own material — links, a style sheet, screenshots — into a new family. Your logo stays yours: point three variables at it.

/brand-ui-create-theme <theme name> [links, file paths, brief]

Where to next

Adopt

Start here — pick a path, run the commands.

Point your agent

Give your coding agent the matrix above.

Re-brand

Swap the theme, keep every component.

Read the source

It’s the same code you would import.