# Stats 01

> 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-01).

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

## Install

```bash
npx shadcn@latest add https://shadcnui-blocks.com/r/stats-01.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-01/components/stats.tsx`

```tsx
const Stats = () => {
  return (
    <div className="mx-auto max-w-(--breakpoint-lg) px-6 py-20 text-center">
      <h2 className="font-medium text-4xl tracking-tight md:text-4xl">
        Why should you choose us?
      </h2>
      <p className="mt-4 text-muted-foreground text-xl md:text-2xl">
        Because after switching to us...
      </p>

      <div className="mt-16 grid justify-center gap-x-12 gap-y-16 sm:mt-24 sm:grid-cols-2 lg:grid-cols-3">
        <div className="max-w-3xs">
          <span className="font-medium text-5xl">96%</span>
          <p className="mt-6 text-lg">
            of customers say they have a better brand experience
          </p>
        </div>
        <div className="max-w-3xs">
          <span className="font-medium text-5xl">95%</span>
          <p className="mt-6 text-lg">
            of customers say they gather more data, more easily
          </p>
        </div>
        <div className="max-w-3xs">
          <span className="font-medium text-5xl">87%</span>
          <p className="mt-6 text-lg">
            of customers say they reveal deeper insights from data
          </p>
        </div>
      </div>
    </div>
  );
};

export default Stats;
```