Components•Metric card
Components•Metric card
Metric card
A KPI tile: headline value, delta against the previous period and a sparkline you can scrub with the pointer or the arrow keys. Switching the period re-totals the number and redraws the line.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/metric-cardHow to use
import { MetricCard } from "@/components/bjork-ui/cards/metric-card";<MetricCard label="Net revenue" periods={["7d", "30d", "90d"]} data={{ "7d": { points: [{ t: Date.UTC(2026, 9, 1), v: 4210 }, /* … */], previous: [3980 /* … */] }, "30d": { points: thirtyDays, previous: priorThirtyDays }, }} aggregate="sum" // "last" for levels like MRR format="currency" currency="USD" onPeriodChange={(p) => track("metric_period", p)}/>// Lower is better:<MetricCard label="Churn" format="percent" aggregate="average" invert data={churn} />
Net revenue
$129,876
+19%vs previous 30 days
Sep 8Oct 7
- Average
- $4,329
- Peak
- $5,802 on Oct 6
- Low
- $3,219