Studiov0.6.0

KPICard

Tier 1 — shadcn

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