# Stat row (goodtabs UI)

A row of stats in one frame, divided by shared hairlines.

## Install

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

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

## Usage

```tsx
import { Stat, StatRow } from "@/components/ui/stat-row"

<StatRow>
  <Stat label="Visitors" value="12,480" note="+6% vs last month" />
  <Stat label="Signups" value="842" />
</StatRow>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` |  | On Stat. What the number measures. |
| value | `ReactNode` |  | On Stat. The number, already formatted. |
| note | `string` |  | On Stat. A short mono line under the value. |

## When to use

- A strip of headline numbers under a hero or at the top of a report
- When separate cards would add too much chrome

## When not to use

- A single number that needs an icon and a footnote: use stat-card
- More than six numbers, where a table scans faster

## Notes for agents

- Server component. It renders a description list, so label and value stay paired for screen readers
- Columns fit the width, at least 9rem each, and two columns on phones
- An odd number of cells on phones leaves a blank cell with no border; prefer even counts

Docs: https://ui.goodtabs.co/components/stat-row