# Bordered Four-Up Stat Band

> Four-column stats section band framed by separators, each metric pairing a large value and label with a badge showing its percentage change.

A shadcn/ui block from the [@7ovr](https://7ovr.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/7ovr/stats-1).

- Page, with a live preview: https://shadcn.exchange/r/7ovr/stats-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/7ovr/stats-1-light-46678fb0ed22f848.png
- Registry item: https://7ovr.com/r/stats-1.json
- Categories: stats
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://7ovr.com/r/stats-1.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: `@base-ui/react`
- Registry items: `badge`, `separator`

## Files

### `registry/blocks/stats/1/stats-block.tsx`

```tsx
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { IconPlaceholder } from "@/components/icons/icon-placeholder"

const stats = [
  { value: "12k+", label: "Active customers", delta: "+18%" },
  { value: "99.9%", label: "Uptime guarantee", delta: "+0.1%" },
  { value: "4.9/5", label: "Average rating", delta: "+0.3" },
  { value: "150+", label: "Countries served", delta: "+12" },
]

export default function StatsBlock() {
  return (
    <section className="flex w-full items-center justify-center bg-background px-6 py-16 text-foreground">
      <div className="mx-auto w-full max-w-5xl">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="font-heading text-3xl font-bold tracking-tight sm:text-4xl">
            Trusted at scale
          </h2>
          <p className="mt-3 text-muted-foreground">
            The numbers product teams rely on every day.
          </p>
        </div>

        <Separator className="mt-12" />
        <dl className="grid grid-cols-2 md:grid-cols-4">
          {stats.map(({ value, label, delta }) => (
            <div
              key={label}
              className="flex flex-col items-center border-border px-6 py-8 text-center md:[&:nth-child(2)]:border-r [&:nth-child(odd)]:border-r"
            >
              <dt className="text-4xl font-bold tracking-tight sm:text-5xl">
                {value}
              </dt>
              <dd className="mt-2 text-sm text-muted-foreground">{label}</dd>
              <Badge variant="secondary" className="mt-2">
                <IconPlaceholder
                  lucide="ArrowUp"
                  tabler="IconArrowUp"
                  hugeicons="ArrowUpIcon"
                  phosphor="ArrowUp"
                  remixicon="RiArrowUpLine"
                  data-icon="inline-start"
                  aria-hidden="true"
                />
                {delta}
              </Badge>
            </div>
          ))}
        </dl>
        <Separator />
      </div>
    </section>
  )
}
```