Stats
v1.0.16Updated 19 Oct 2026Metrics / stats band highlighting headline numbers (users, uptime, revenue). Copy-paste block; baked-in demo content (edit the JSX to customise).
Preview
Live · 12 stories▸Why this is recommendedstatsmetricsnumberskpi+3
Stats — band.
- ✓Landing pages
- ✓About / company pages
- ✓Marketing pages
- Band, cards, split-with-copy and gradient layouts
- Value + label per stat
- ONE metrics array drives every layout: each block reads the fields it has a place for (icon, caption, series, delta, progress, target) and ignores the rest
- metrics defaults to [] - an uptime figure or a transaction volume is a claim about the business whose site this sits on, and a default is a claim nobody proofread (condo69 fb_bc8045e2 / fb_f8fba1de)
- With no metrics a block keeps its heading and shows labels.emptyMetrics - never an empty band, an empty card grid, an axis-less chart or a NaN ticker
- Every block renders correctly for 0, 1, 2, 3 and many metrics: no undefined metric reaches the DOM and none is silently dropped
- StatsSplitWithCopy renders NO call to action until primaryCtaHref / onPrimaryCtaClick (or the secondary pair) is given
- ✕Interactive dashboards (use chart components)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
classNameOptional wrapper class override
—labelsOverride every built-in display string across the stats family (eyebrows, headings, subcopy, column headers, chart captions, aria-labels) for i18n or white-labelling. Merged over DEFAULT_STATS_LABELS.
—metricsThe numbers this block puts on screen, in reading order. One array drives every layout; each block reads the fields it has a place for (icon, caption, series, delta, progress, target). Defaults to [] - a default figure is a claim nobody proofread, so a vendored copy shows labels.emptyMetrics. MCP feedback fb_bc8045e2 / fb_f8fba1de.
—comparisonRowsStatsComparison rows - a measure with a before and an after. Defaults to []: the table is omitted entirely rather than rendering a header row over nothing.
—chartSeriesStatsWithChart bars, oldest first. Defaults to []: no series, no chart, rather than an axis-less box.
—primaryCtaHrefWhere the StatsSplitWithCopy primary call to action goes. Until this (or onPrimaryCtaClick) is given the button renders NOTHING - it used to be wired to nothing at all.
—onPrimaryCtaClickWhat the primary call to action does. Safe to combine with primaryCtaHref; on its own it makes the CTA a real type=button. Receives the click event so a routed host can preventDefault (fb_bf7dc63a).
—secondaryCtaHrefWhere the secondary call to action goes. Same contract as primaryCtaHref.
—onSecondaryCtaClickWhat the secondary call to action does. See onPrimaryCtaClick.
—linkComponentThe host app link component for every anchor this family renders (the two calls to action). Defaults to a plain anchor, which in a routed app reloads the whole document (fb_bf7dc63a).
—