Streams: 1.3M in Sep 2026, up 12%, an improvement from 1.1M in Aug 2026.
Joni Mitchell, every release
One metric across two periods: the label and a delta chip that knows whether up is good news, the current figure written with Intl.NumberFormat beside the one it is compared with, and a pair of bars on one scale, this period solid and the earlier one faint, that grow in from the left on a soft ease-out. Optional breakdown rows compare further metrics the same way, each with its own twin bars and chip, and each row can have its own format and direction. The comparison is read out once as a sentence for screen readers. Three tones and three sizes; it shares its number formatting with readout-stat.
The import and the props worth knowing about, in one place.
import { ReadoutCompare } from "@/components/beste/component/readout-compare";
<ReadoutCompare
label="Streams"
value={1284300}
previous={1146900}
format="compact" // "number" | "currency" | "percent" | "compact"
currentLabel="Sep 2026"
previousLabel="Aug 2026"
breakdown={[
{ label: "Spotify", value: 742100, previous: 681400 },
{ label: "Apple Music", value: 298200, previous: 301900 },
]}
/>
// Refunds going down is good news
<ReadoutCompare
label="Refunds"
value={1840}
previous={2310}
format="currency"
goodDirection="down"
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | What is being measured, above the figure. |
value* | number | — | This period's figure. |
previous* | number | — | The period it is compared with. |
format | ReadoutFormat | — | |
currency | string | — | ISO currency code, for `format="currency"`. |
locale | string | — | |
fractionDigits | number | — | Most digits after the point. Each format has its own default. |
goodDirection | "up" | "down" | — | Which way a change is good news. Revenue is `up`, churn is `down`. |
currentLabel | string | — | Name of this period, beside its bar. |
previousLabel | string | — | Name of the earlier period, beside its bar. |
breakdown | ReadoutCompareRow[] | — | Further metrics compared the same way, under the main one. |
caption | string | — | A short line at the foot of the card. |
size | "sm" | "default" | "lg" | — | |
tone | "muted" | "outline" | "ghost" | — | |
className | string | — |