Stat Card

KPI tile with an animated count-up value and optional delta indicator.

StatCard renders a label, a large tabular number, and an optional change badge. The value counts up over --dur-slow (skipped entirely under reduced motion) and fades in with animate-count-fade.

Installation

import { StatCard } from "@iammikz/srui";

Usage

Monthly revenue
12.4
$0
Active users
3.1
0
Churn rate
0.6
0%

The count-up re-runs whenever the value changes — .

<StatCard
  label="Monthly revenue"
  value={48219}
  formatValue={(v) => `${v.toLocaleString()}`}
  delta={{ value: 12.4, direction: "up" }}
/>

Props

PropTypeDefaultDescription
labelstring—The metric name
valuenumber—The number (animated on change)
formatValue(v: number) => stringString(v)Currency/percent formatting
delta{ value: number; direction: "up" | "down" }—Change badge; up renders in --success, down in --destructive

Examples

Without a delta

Active users
0

Percent formatting, down delta

Churn rate
0.6
0

Accessibility

  • The delta direction is conveyed by color and an arrow icon, so it survives color-blindness and monochrome rendering.
  • The count-up animation checks prefers-reduced-motion and renders the final value immediately when set; the fade uses motion-safe:.