dashboardcn
1

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]

Installation

pnpm dlx shadcn@latest add https://dashboardcn.com/r/kpi-card.json

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]}
/>