# Stats 02

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

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

## Install

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

```tsx
const Stats = () => {
  return (
    <div className="py-20">
      <div className="mx-auto w-full max-w-(--breakpoint-xl) px-6 py-12 xl:px-0">
        <h2 className="font-medium text-4xl tracking-tight md:text-4xl">
          The impact we've made so far
        </h2>
        <p className="mt-4.5 max-w-2xl text-lg text-muted-foreground md:text-xl">
          The world&apos;s most advanced UI kit for Figma. Meticulously crafted
          with 100% Auto Layout 5.0, variables, smart variants, and WCAG
          accessibility.
        </p>

        <div className="mt-16 grid justify-center gap-x-10 gap-y-16 sm:mt-24 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
          <div>
            <span className="font-medium text-5xl tracking-tight md:text-6xl">
              900+
            </span>
            <p className="mt-6 font-medium text-xl">
              Global styles + variables
            </p>
            <p className="mt-2 text-muted-foreground">
              Super smart global color, typography and effects styles +
              variables!
            </p>
          </div>
          <div>
            <span className="font-medium text-5xl text-muted-foreground tracking-tight md:text-6xl">
              10,000+
            </span>
            <p className="mt-6 font-medium text-xl">Components and variants</p>
            <p className="mt-2 text-muted-foreground">
              We&apos;ve thought of everything you need so you don&apos;t have
              to.
            </p>
          </div>
          <div>
            <span className="font-medium text-5xl tracking-tight md:text-6xl">
              420+
            </span>
            <p className="mt-6 font-medium text-xl">Page design examples</p>
            <p className="mt-2 text-muted-foreground">
              A whopping 420+ ready-to-go desktop and mobile page examples.
            </p>
          </div>
          <div>
            <span className="font-medium text-5xl text-muted-foreground tracking-tight md:text-6xl">
              2,000+
            </span>
            <p className="mt-6 font-medium text-xl">Icons and logos</p>
            <p className="mt-2 text-muted-foreground">
              All the icons you&apos;ll need, including country flags and
              payments.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Stats;
```