24 KPI Dashboard

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?

Reach out at hello@brandingupstudio.com — we usually reply within 1 business day. Custom edits from $75/hr.

More resources

Explore more components at BrandingUp → https://brandingupstudio.com

Built with code, fully customizable via property controls. Unlink is not provided so we can keep delivering updates.

All 8 paid BrandingUp components in one payment: All-Access Pass, $49 → https://brandingup.lemonsqueezy.com/checkout/buy/3391c106-6fbc-41b8-9cc8-b63365b95665