dashboardcn

Search documentation

Search for a page or component.

KPI Card

PreviousNext

A metric card with value, period-over-period delta, and an optional sparkline.

Revenue
$84,120.00
+12.4%
vs. last 30 days
Active users
1.3K
+0.4%
vs. last 30 days
Churn
2.1%
-34.0%
vs. last 30 days
Open tickets
17
0.0%
No change this week
import { KpiCard } from "@/components/ui/kpi-card"

const revenue = [42, 48, 45, 52, 58, 55, 61, 67, 64, 72, 78, 84]

The KPI card is the stat card at the top of most dashboards: a label, a formatted value, a delta badge for the change since last period, and an optional sparkline. It is built from the shadcn/ui Card, so it matches the rest of your app, and it knows that a decrease is good for metrics like churn or latency.

Installation

pnpm dlx shadcn@latest add @dashboardcn/kpi-card

Also installs card, tooltip from shadcn/ui if missing.

Usage

import { KpiCard } from "@/components/ui/kpi-card"

<KpiCard
  label="Revenue"
  value={84120}
  format="currency"
  delta={0.124}
  deltaLabel="vs. last 30 days"
  trend={[42, 48, 45, 52, 58, 61, 67, 72, 78, 84]}
/>