# Stats Cards

> Six live metrics with directional deltas.

A shadcn/ui block from the [@blockforge](https://blockforge.terravidhal.me) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blockforge/stats-cards).

- Page, with a live preview: https://shadcn.exchange/r/blockforge/stats-cards
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blockforge/stats-cards-light-d5605e62bb288e9d.png
- Registry item: https://blockforge.terravidhal.me/r/stats-cards.json
- Categories: stats
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blockforge.terravidhal.me/r/stats-cards.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`

## Files

### `registry/blocks/stats-cards.tsx`

```tsx
import {
  ArrowDownRight,
  ArrowUpRight,
  Clock,
  Globe,
  Rocket,
  ShieldCheck,
  Users,
  Zap,
} from "lucide-react";

import { cn } from "@/lib/utils";

const stats = [
  { icon: Rocket, label: "Deploys this month", value: "38,410", delta: "+12%", up: true },
  { icon: Clock, label: "Median build time", value: "48s", delta: "−9s", up: true },
  { icon: Users, label: "Active developers", value: "1,284", delta: "+4%", up: true },
  { icon: Globe, label: "Regions serving", value: "30", delta: "+2", up: true },
  { icon: Zap, label: "p95 latency", value: "41ms", delta: "+3ms", up: false },
  { icon: ShieldCheck, label: "Failed audits", value: "0", delta: "12 mo", up: true },
];

export default function StatsCards() {
  return (
    <section className="bg-background">
      <div className="mx-auto w-full max-w-6xl px-6 py-20 sm:py-24">
        <div className="mb-10 max-w-md">
          <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
            This month, in numbers
          </h2>
          <p className="mt-2 text-muted-foreground">
            Pulled from the live platform — deltas versus last month.
          </p>
        </div>

        <div className="grid grid-cols-2 gap-4 lg:grid-cols-3">
          {stats.map((stat) => (
            <div
              key={stat.label}
              className="rounded-xl border border-border/60 bg-card p-5"
            >
              <div className="flex items-center justify-between">
                <stat.icon className="size-4 text-muted-foreground" />
                <span
                  className={cn(
                    "flex items-center gap-0.5 font-mono text-xs tabular-nums",
                    stat.up ? "text-muted-foreground" : "text-destructive",
                  )}
                >
                  {stat.up ? (
                    <ArrowUpRight className="size-3" />
                  ) : (
                    <ArrowDownRight className="size-3" />
                  )}
                  {stat.delta}
                </span>
              </div>
              <p className="mt-4 text-2xl font-semibold tracking-tight tabular-nums sm:text-3xl">
                {stat.value}
              </p>
              <p className="mt-1 text-sm text-muted-foreground">{stat.label}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
```