display contract

Stat

Single big number with an optional label and trend.

Variants

  • default
  • trend

Sizes

  • sm
  • md
  • lg
  • xl

Slots

  • value
  • label
  • trend

Example

<Stat value={revenue} label="Monthly revenue" trend={{ value: 0.08 }} />

Usage rule

Format numbers with Intl.NumberFormat — locale-aware grouping.

The full Stat contract has 3 more rules, plus the do-not patterns. Get the full recipe.

Get the Stat contract in your project.