What it does
KPI stat cards for landing, investor and SaaS metrics pages. Each card shows a label, a big number that counts up when it scrolls into view, a change badge (▲ 12.4% / ▼ 0.6%), a note and a mini sparkline. No chart library, no images needed.
Customizable properties
- Cards (unlimited): label, value, prefix/suffix, decimals, change (manual or auto from the sparkline), good direction, note, sparkline data, 10 built-in glyphs or your own icon
- Good direction per card: set "Lower" on churn, CAC or response time and a falling number turns green
- Number formatting: locale separators (en-US, de-DE, ko-KR…), decimals, Compact mode (1.3M, 48.2k)
- Columns for desktop / tablet / mobile, based on the width of the section it sits in
- Card style: Soft, Outlined, Glass, Filled · Sparkline: Area, Line, Bars or none, bottom or right
- Count-up: on/off, duration, stagger, Canvas Preview (final values or zero state)
- Colors, gap, padding, radius, align, fonts
Why this component
- Sparkline + delta + count-up in one card, with as many cards as you need.
- Per-metric good direction — most counters paint every drop red.
- Real locale and compact formatting that holds while the number counts.
- Review-safe: counts once when visible, stops when done, final values on the canvas and for reduced motion.
- Accessible: values are real text, changes read as increased/decreased, sparklines carry a summary.
Need help?
Email hello@brandingupstudio.com — we usually reply within 1 business day. Custom edits are available from $75/hr.
