MetricUI 1.1.0 — Headline Numbers

Headline Numbers

Every chart and table now accepts a headline prop — a summary number under the title that gives you the punchline at a glance.

<BarChart headline={{ value: 1200000, format: "currency", label: "Total" }} />
<BarChart headline="$1.2M total" />  // string shorthand

Supports formatting, comparison badges with trend arrows, conditional coloring, and count-up animation.

Architecture

• ChartContainer shell pattern — add a new prop to DataComponentProps, every chart gets it automatically. No more updating 16 files.
• DataTable — now uses CardShell header like every other component.
• namedColors.ts — shared color resolver.
• Fixed horizontal BarChart label clipping.

Changelog

Backfilled changelog from 0.7.0 through 1.1.0.

Full changelog →
Cookbook recipe →