Studiov0.6.0

KPICard

Tier 1shadcn
Data Display

A dashboard card displaying a key performance indicator with title, value, and trend.

Live Preview

Total Stewardship Credits

12,450

Q1 2026

+18%

Code

import { KPICard } from "@regen/ui";

<KPICard />

Props Inspector

No configurable props for this component.

Documentation

Use Cases

  • Dashboard header metrics
  • Executive summary panels
  • Real-time monitoring tiles

Do

  • Pair with accentColor for visual category distinction
  • Use subtitle for date range or context

Don't

  • Don't add too many KPI cards — max 6 per row
  • Don't use without a meaningful trend direction