KPI cards and stats

68 components, 67 with React code

Metric cards, KPI strips and compact stat rows drawn from six real dashboards. Each one pairs a value with a comparison, so the number says whether it is good or bad.

Top row of an overview pageTargets and progress against planHealth and status counts in admin consoles

KPI strip component preview
KPI stripLoopoCodeFree
KPI strip, Total audience component preview
KPI 1 component preview
KPI 1LoopoCodeFree
Step stats component preview
Step statsLoopoCodeFree
KPI strip, Metric selector component preview
Contact & status card component preview
KPI, Registered agents component preview
KPI, Running now component preview
KPI, Running nowAutonCode Pro
KPI, Over privileged component preview
KPI, Avg credential TTL component preview
KPI, Active policies component preview
KPI, Requests evaluated component preview
KPI, Blocked today component preview
KPI, Blocked todayAutonCode Pro
KPI, Avg approval time component preview
KPI, Expiring in 1 hour component preview
KPI, Long-lived component preview
KPI, Long-livedAutonCode Pro
KPI, Rotation overdue component preview
KPI, Running now, Running now component preview
KPI Strip component preview
KPI StripMailPulseCode Pro
KPI 1 component preview
KPI 1MailPulseCode Pro
Browse and filter all 68

Every kpi cards and stats component, by system

Questions

What makes a good KPI card?

A plain label, one value with its unit, a comparison against a stated baseline, a status colour backed by text, and optionally a sparkline and a link to the detail.

Can I copy these KPI cards as React code?

Yes for every card marked Code: React 19 and Tailwind CSS v4, checked against the Figma original. The Loopo KPI card is free.

Guides