# Stats 09

> A simple stats block

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

- Page, with a live preview: https://shadcn.exchange/r/shadcnui-blocks/stats-09
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnui-blocks/stats-09-light-5420ccbdb582edda.png
- Registry item: https://shadcnui-blocks.com/r/stats-09.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnui-blocks.com/r/stats-09.json
```

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

## Files

### `src/registry/blocks/shared/stats-09/components/stats.tsx`

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

const Stats = () => {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <div className="mx-auto max-w-(--breakpoint-xl) py-12 text-center">
        <h2 className="font-medium text-4xl tracking-tight md:text-4xl">
          Why should you choose us?
        </h2>
        <p className="mt-3.5 text-muted-foreground text-xl md:text-2xl">
          Because after switching to us...
        </p>

        <div className="px-6">
          <div
            className={cn(
              "mt-16 grid max-w-5xl justify-center gap-y-8 border max-sm:divide-y sm:mt-24 sm:grid-cols-2 sm:gap-y-0 lg:grid-cols-3 lg:divide-x",
              "sm:*:last:border-t sm:*:first:border-e lg:*:last:border-t-0"
            )}
          >
            <div className="max-sm:space-y-6 max-sm:px-6 max-sm:py-12 sm:divide-y">
              <div className="font-medium text-5xl sm:px-6 sm:py-12">96%</div>
              <p className="text-lg sm:p-6">
                of customers say they have a better brand experience
              </p>
            </div>
            <div className="max-sm:space-y-6 max-sm:px-6 max-sm:py-12 sm:divide-y">
              <div className="font-medium text-5xl sm:px-6 sm:py-12">95%</div>
              <p className="text-lg sm:p-6">
                of customers say they gather more data, more easily
              </p>
            </div>
            <div className="max-sm:space-y-6 max-sm:px-6 max-sm:py-12 sm:col-span-2 sm:divide-y lg:col-span-1">
              <div className="font-medium text-5xl sm:px-6 sm:py-12">87%</div>
              <p className="text-lg sm:p-6">
                of customers say they reveal deeper insights from data
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Stats;
```