Stats Charts

1import { StatsCard } from "@/registry/ui";
2
3export function StatsCardExample() {
4  return (
5    <div className="mx-auto grid w-full max-w-6xl grid-cols-1 gap-4 text-left sm:grid-cols-2 lg:grid-cols-4">
6      <StatsCard
7        title="MRR"
8        value="$92,340"
9        change={{ value: 8.5, label: "vs last month" }}
10        sparklineData={[12, 18, 15, 22, 28, 24, 32, 38, 35, 42, 48, 45]}
11        color="var(--chart-1)"
12        stylePreset="signal"
13      />
14      <StatsCard
15        title="Active teams"
16        value="1,130"
17        change={{ value: 4.2, label: "vs last month" }}
18        sparklineData={[22, 28, 25, 32, 38, 35, 42, 48, 45, 52, 58, 55]}
19        color="var(--chart-2)"
20        stylePreset="glass"
21      />
22      <StatsCard
23        title="New pipeline wins"
24        value="312"
25        change={{ value: 14.3, label: "vs last month" }}
26        sparklineData={[8, 12, 15, 18, 22, 28, 32, 38, 42, 48, 52, 58]}
27        color="var(--chart-3)"
28        stylePreset="terminal"
29      />
30      <StatsCard
31        title="Incident load"
32        value="0.08%"
33        change={{ value: -2.1, label: "vs last week" }}
34        sparklineData={[18, 15, 12, 14, 11, 9, 8, 10, 7, 6, 5, 4]}
35        color="var(--chart-5)"
36        stylePreset="signal"
37      />
38    </div>
39  );
40}