ComponentsData
Stat
A key number with its change and a sparkline. Direction never by color alone.
Theme
Motion
A key number with its change and a sparkline. Direction never by color alone.
<Stat
label="Monthly revenue"
value="$48,210"
delta={12.5}
deltaLabel="vs last month"
chart={<Sparkline data={revenue} />}
/>The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.
npm i junco @junco/tailwindimport { Stat, StatGroup, Sparkline } from "junco";
<StatGroup>
<Stat label="MRR" value="$13,036" delta={8.2} deltaLabel="vs last month" chart={<Sparkline data={mrr} />} />
<Stat label="Churn" value="1.9%" delta={-0.4} isInverse />
<Stat label="Seats" value="244" delta="+12" trend="up" />
</StatGroup>StatGroup lays stats out in a responsive grid as one description list.
Stat#labelvaluedeltatrendisInversedeltaLabelchartsizeclassNames| Prop | Type | Default |
|---|---|---|
labelRequired. What the number is. | ReactNode | – |
valueRequired. The number, already formatted. | ReactNode | – |
deltaChange vs the comparison period. A number is shown as a signed percent (12.5 → +12.5%). | number | string | – |
trendDirection. Inferred from a numeric delta when omitted. | "up" | "down" | "flat" | – |
isInverseFor numbers where a rise is bad (costs, churn): up reads as the warning color. Icon and sign still show the real direction. | boolean | false |
deltaLabelText after the delta, e.g. "vs last month". | ReactNode | – |
chartA small chart under the numbers, usually a Sparkline. | ReactNode | – |
sizeSize of the value. | "sm" | "md" | "lg" | "md" |
classNamesClass overrides for each part. | { root?, label?, value?, footer?, delta?, deltaLabel?, chart? } | – |
Sparkline#A tiny dependency-free line chart. Colored with currentColor (primary inside a Stat).
dataisFilled| Prop | Type | Default |
|---|---|---|
dataRequired. At least two points. | number[] | – |
isFilledFill the area under the line. | boolean | true |