# Stats Section v3

> Left-aligned stats section with an eyebrow label, large heading, and full-width stat rows showing a description with info icon on the left and an oversized value on the right, separated by horizontal dividers.

A shadcn/ui block from the [@uiception](https://uiception.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/stats-section-v3).

- Page, with a live preview: https://shadcn.exchange/r/uiception/stats-section-v3
- Screenshot: https://shadcn.exchange/shot/uiception/stats-section-v3/light.png
- Registry item: https://uiception.com/r/stats-section-v3.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/uiception/stats-section-v3.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: `geist`

## Files

### `registry/new-york/blocks/stats-section-v3/page.tsx`

```tsx
import StatsSectionV3 from "./components/stats-section-v3"

export default function Page() {
  return <StatsSectionV3 />
}
```

### `registry/new-york/blocks/stats-section-v3/components/stats-section-v3.tsx`

```tsx
import { GeistSans } from "geist/font/sans"

import { formatStat, HEADING, LABEL, STATS } from "../lib/config"

export default function StatsSectionV3() {
  return (
    <section className={`${GeistSans.className} py-16 md:py-24`}>
      <div className="mx-auto max-w-5xl px-4">
        <p className="mb-3 text-sm tracking-wide text-muted-foreground">
          {LABEL}
        </p>
        <h2 className="max-w-xl text-3xl tracking-tight sm:text-4xl">
          {HEADING}
        </h2>

        <div className="mt-12 border-t border-border">
          {STATS.map((stat) => (
            <div
              key={stat.id}
              className="flex flex-col gap-4 border-b border-border py-8 sm:flex-row sm:items-center sm:justify-between sm:gap-12"
            >
              <span className="text-sm text-muted-foreground sm:text-base">
                {stat.description}
              </span>
              <span className="text-5xl tracking-tight text-foreground lg:text-6xl">
                {formatStat(stat)}
              </span>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
```

### `registry/new-york/blocks/stats-section-v3/lib/config.ts`

```ts
export type Stat = {
  id: string
  description: string
  numeric: number
  prefix: string
  suffix: string
  decimals?: number
  useLocale?: boolean
}

export const LABEL = "By the numbers"

export const HEADING = "The platform serious investors trust."

export const STATS: Stat[] = [
  {
    id: "instruments",
    description: "Stocks, ETFs, and options monitored in real time",
    numeric: 12000,
    prefix: "",
    suffix: "+",
    useLocale: true,
  },
  {
    id: "speed",
    description: "Average signal detection speed across global markets",
    numeric: 47,
    prefix: "",
    suffix: "ms",
  },
  {
    id: "users",
    description: "Portfolio managers who made the switch last year",
    numeric: 8400,
    prefix: "",
    suffix: "+",
    useLocale: true,
  },
  {
    id: "assets",
    description: "Assets under analysis across all connected accounts",
    numeric: 2.1,
    prefix: "$",
    suffix: "T+",
    decimals: 1,
  },
]

export function formatStat(stat: Stat): string {
  const n = stat.decimals
    ? stat.numeric.toFixed(stat.decimals)
    : stat.useLocale
      ? stat.numeric.toLocaleString()
      : String(stat.numeric)
  return `${stat.prefix}${n}${stat.suffix}`
}
```