Stat Card
One number that matters: it counts up into view and shows the change against a previous period, with an optional sparkline.
import { StatCard } from "pleate/stat-card";Dashboard row
Revenue
€48,230+12.4%vs May
Bookings
1,284+6.8%vs May
Cancellations
37-18%vs May
Avg. rating
4.82+0.4%vs May
Props
- label / value / format
The metric.
ReactNode / number / (v) => string- delta / deltaLabel / invertTrend
Change (0.12 = +12%); invert when down is good.
number / ReactNode / boolean- trend
Sparkline data.
number[]- icon
Icon tile.
ReactNode- animated
Count up into view.
booleandefault true
Accessibility
- Screen readers read the final value, not the animation.
- No count-up with reduced motion.