KPI stat card with an icon, an up/down delta toned by meaning (lowerIsBetter for latency or error rate) and a tiny SVG sparkline. Theme tokens only, no chart library.
"use client";
import { Activity, CreditCard, Timer, Users } from "lucide-react";
import type { ReactNode } from "react";
import { StatCard } from "@/components/ui/stat-card";
const settings = {
showIcons: true,
showTrend: true,
};
const asMilliseconds = (magnitude: number) => `${magnitude} ms`;
const asPoints = (magnitude: number) => `${magnitude} pp`;
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
const icon = (node: ReactNode) => (s.showIcons ? node : undefined);
return (
<div className="flex min-h-[460px] w-full items-center justify-center bg-background p-6 text-foreground">
<div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-2">
<StatCard
delta={12.4}
deltaLabel="vs last month"
icon={icon(<CreditCard />)}
iconTone="primary"
label="Revenue"
trend={
s.showTrend ? [31, 34, 33, 38, 41, 39, 44, 47, 46, 52] : undefined
}
value="$48,210"
/>
<StatCard
delta={8.2}
deltaLabel="vs last week"
icon={icon(<Users />)}
label="Active users"
trend={
s.showTrend ? [820, 860, 845, 900, 940, 930, 990, 1010] : undefined
}
value="12,480"
/>
<StatCard
delta={-0.6}
deltaLabel="vs yesterday"
formatDelta={asPoints}
icon={icon(<Activity />)}
label="Error rate"
lowerIsBetter
trend={
s.showTrend ? [2.4, 2.2, 2.6, 2.1, 1.9, 2, 1.8, 1.7] : undefined
}
value="1.7%"
/>
<StatCard
delta={38}
deltaLabel="p95, vs last week"
formatDelta={asMilliseconds}
icon={icon(<Timer />)}
iconTone="destructive"
label="Response time"
lowerIsBetter
trend={
s.showTrend ? [212, 220, 218, 236, 241, 238, 255, 262] : undefined
}
value="262 ms"
/>
</div>
</div>
);
}