# Simple 3 Cols

> Three evenly spaced columns each with a number and a short label below. Use it for a clean, balanced stats strip on any marketing or about page.

A shadcn/ui block from the [@shadcn-ui-blocks](https://www.shadcn-ui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-ui-blocks/marketing-stats-simple-3-cols).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-ui-blocks/marketing-stats-simple-3-cols
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-ui-blocks/marketing-stats-simple-3-cols-light-7e0e5937e0e8470a.png
- Registry item: https://www.shadcn-ui-blocks.com/r/marketing-stats-simple-3-cols.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.shadcn-ui-blocks.com/r/marketing-stats-simple-3-cols.json
```

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

## Files

### `components/blocks/marketing/stats/simple-3-cols.tsx`

```tsx
export default function Simple3Cols() {
  return (
    <div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px] py-24 lg:py-32">
      {/* Grid */}
      <div className="grid gap-6 grid-cols-1 sm:gap-12 sm:grid-cols-2 md:grid-cols-3 lg:gap-8">
        {/* Stats */}

        <div>
          <h4 className="text-lg sm:text-xl font-semibold text-foreground/85">
            Accuracy rate
          </h4>
          <p className="mt-2 sm:mt-3 text-4xl sm:text-6xl font-bold">99.95%</p>
          <p className="mt-1 text-muted-foreground">in fulfilling orders</p>
        </div>
        {/* End Stats */}

        {/* Stats */}
        <div>
          <h4 className="text-lg sm:text-xl font-semibold text-foreground/85">
            Startup businesses
          </h4>
          <p className="mt-2 sm:mt-3 text-4xl sm:text-6xl font-bold">2,000+</p>
          <p className="mt-1 text-muted-foreground">partner with Acme</p>
        </div>
        {/* End Stats */}

        {/* Stats */}
        <div>
          <h4 className="text-lg sm:text-xl font-semibold text-foreground/85">
            Happy customer
          </h4>
          <p className="mt-2 sm:mt-3 text-4xl sm:text-6xl font-bold">85%</p>
          <p className="mt-1 text-muted-foreground">this year alone</p>
        </div>
        {/* End Stats */}
      </div>
      {/* End Grid */}
    </div>
  );
}
```