# Stats band (goodtabs UI)

A full-width band of three or four big numbers between hairlines.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/stats-band.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/stats-band`

## Usage

```tsx
import { StatsBand } from "@/components/stats-band"

<StatsBand stats={[{ value: "200", label: "components" }, { value: "MIT", label: "licence" }, { value: "10", label: "categories" }]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| stats | `{ value: string; label: string }[]` |  | Three or four numbers. Keep values short. |

## When to use

- Between a hero and the feature sections
- Full-width proof with real numbers
- Landing pages that need a pause in rhythm

## When not to use

- Dashboards, where stat-card carries trends
- More than four numbers
- Numbers you cannot back up

## Notes for agents

- Server component; the band is a section with border-y and a dl inside
- Dividers are 1px gaps over bg-border, so they stay hairline at any width
- Two columns on phones, three or four from md depending on the count
- Place it directly in main, outside any max-width container

## The maths

- Dividers are gap-px over bg-border: a 1px gap fills with the hairline colour, so n columns draw n - 1 rules with no borders to collapse.
- Columns: 4 stats give grid-cols-4 from md, 3 give grid-cols-3, each 100% / n wide.

Docs: https://ui.goodtabs.co/components/stats-band