Stat
Live demo
Weekly volume
12,480 kg+8%
MRR
$48.2k
+12.4% this month
Rest
1:30
Between sets
How to use it
A number with its label, unit and delta, set in the theme's number face with tabular figures; it counts up the first time it scrolls into view.
- Provide
value(number or preformatted string),label, and optionallyunit,prefix,suffix,decimals,delta,deltaTone,sub. size="hero"for the single most important number on a screen, inside a hero card (56px).kpifor tiles and dashboards (30px).inlineinside rows (17px, the heading size; plain numbers in rows and tables usemetaat 13px).- Paper scales numbers up 1.36x and sets them in italic serif; Graphite uses mono numerals. You do nothing; the theme handles it.
- Screen readers get the full value immediately; the count-up is visual only and respects reduced motion.
Do: put units outside the number ("12,480 kg"). Don't: two hero stats on one screen, decimals nobody needs, animate values that update every second.
In every theme
Follows the mode picked in the header.Graphite
MRR
$48.2k
Active seats
1,284+86
Churn
1.9%+0.2
Glass
MRR
$48.2k
Active seats
1,284+86
Churn
1.9%+0.2
Paper
MRR
$48.2k
Active seats
1,284+86
Churn
1.9%+0.2
Mineral
MRR
$48.2k
Active seats
1,284+86
Churn
1.9%+0.2
Enamel
MRR
$48.2k
Active seats
1,284+86
Churn
1.9%+0.2
Ember
MRR
$48.2k
Active seats
1,284+86
Churn
1.9%+0.2
Code
React
import { Stat } from 'enma/react';
<Stat size="hero" label="Weekly volume" value={12480} unit="kg" delta="+8%" />
<Stat label="MRR" value={48.2} decimals={1} prefix="$" suffix="k" sub="+12.4% this month" />
<Stat size="inline" label="Rest" value="1:30" />Plain HTML
<div class="e-stat e-stat--kpi">
<div class="e-stat__label">MRR</div>
<div class="e-stat__row">
<span class="e-stat__value"><span aria-hidden="true">$48.2k</span><span class="e-visually-hidden">$48.2k</span></span>
</div>
<div class="e-stat__sub">+12.4% this month</div>
</div>Props
StatProps
Also accepts every attribute of React.HTMLAttributes<HTMLDivElement>.
| Prop | Type | Default | Description |
|---|---|---|---|
label | React.ReactNode | ||
value required | number | string | A number counts up on first view; a string renders as is. | |
decimals | number | 0 | |
prefix | string | ||
suffix | string | ||
unit | string | ||
delta | string | ||
deltaTone | 'positive' | 'negative' | 'neutral' | 'accent' | 'positive' | |
sub | React.ReactNode | ||
size | 'hero' | 'kpi' | 'inline' | 'kpi' | hero: the one big number per screen. kpi: tiles. inline: inside rows. |
animate | boolean | true |