# Stats Hairline

> Four key numbers separated by construction hairlines.

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

- Page, with a live preview: https://shadcn.exchange/r/blockforge/stats-hairline
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blockforge/stats-hairline-light-fcfc80c1114ebc4a.png
- Registry item: https://blockforge.terravidhal.me/r/stats-hairline.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-hairline.json
```

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

## Files

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

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

const stats = [
  { value: "12,400+", label: "teams in production" },
  { value: "99.99%", label: "uptime, rolling 90 days" },
  { value: "38ms", label: "median response time" },
  { value: "4.9/5", label: "support satisfaction" },
];

export default function StatsHairline() {
  return (
    <section className="border-y border-border/60 bg-background">
      <div className="mx-auto grid w-full max-w-6xl grid-cols-2 lg:grid-cols-4">
        {stats.map((stat, index) => (
          <div
            key={stat.label}
            className={cn(
              "px-6 py-10",
              index > 0 && "lg:border-l lg:border-border/60",
              index % 2 === 1 && "max-lg:border-l max-lg:border-border/60",
              index >= 2 && "max-lg:border-t max-lg:border-border/60",
            )}
          >
            <p className="text-3xl font-semibold tracking-tight tabular-nums sm:text-4xl">
              {stat.value}
            </p>
            <p className="mt-1.5 text-sm text-muted-foreground">{stat.label}</p>
          </div>
        ))}
      </div>
    </section>
  );
}
```