# Stats Band

> A row of large stat numbers with labels and dividers.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/stats-band
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/stats-band.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

No extra dependencies.

## Usage

```tsx title="components/stats-band-demo.tsx"
import { StatsBand } from "@/components/stats-band"

export default function StatsBandDemo() {
  return (
    <div className="w-full max-w-4xl">
      <StatsBand
        stats={[
          { value: "12k+", label: "Active teams" },
          { value: "99.99%", label: "Uptime, last 12 months" },
          { value: "48M", label: "Requests per day" },
          { value: "140", label: "Countries served" },
        ]}
      />
    </div>
  )
}
```

## Source

```tsx title="components/stats-band.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface StatsBandItem {
  value: string
  label: string
}

export interface StatsBandProps extends React.ComponentProps<"section"> {
  stats: StatsBandItem[]
}

export function StatsBand({ stats, className, ...props }: StatsBandProps) {
  return (
    <section className={cn("w-full rounded-2xl border bg-card px-6 py-10 text-card-foreground", className)} {...props}>
      <dl className="mx-auto grid max-w-5xl grid-cols-2 gap-y-8 md:flex md:items-stretch md:justify-between md:gap-0">
        {stats.map((stat, i) => (
          <React.Fragment key={stat.label}>
            {i > 0 && <div className="hidden w-px self-stretch bg-border md:block" aria-hidden />}
            <div className="flex flex-col-reverse items-center gap-1 px-4 text-center md:flex-1">
              <dt className="text-sm text-muted-foreground">{stat.label}</dt>
              <dd className="text-4xl font-semibold tracking-tight tabular-nums sm:text-5xl">{stat.value}</dd>
            </div>
          </React.Fragment>
        ))}
      </dl>
    </section>
  )
}
```