# Stat card (goodtabs UI)

A number with its label, a change with a trend arrow, and a quiet footnote.

## Install

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

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

## Usage

```tsx
import { StatCard } from "@/components/ui/stat-card"

<StatCard label="Visitors" value="12,480" delta="+6% vs last month" trend="up" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` |  | What the number measures. |
| value | `ReactNode` |  | The number, already formatted. |
| delta | `string` |  | Change text shown next to the trend icon. |
| trend | `"up" | "down" | "flat"` | `"flat"` | Direction of the change, drawn as an icon. |
| footnote | `string` |  | One quiet line at the bottom. |
| icon | `ReactNode` |  | An icon or small element shown top right. |

## When to use

- Dashboards and overview pages that lead with a handful of numbers
- A stats strip under a hero or at the top of a report
- Any place a number needs a label and a sense of direction

## When not to use

- Series over time: use a chart, not a row of cards
- More than six numbers side by side, where a table scans faster

## Notes for agents

- Format the value before passing it; the card does not know about locales or units
- Trend is monochrome on purpose: no green or red, the arrow and the delta text carry the meaning
- It extends shadcn's Card, so className and other div props pass through
- Put several in a CSS grid; the card has no fixed width

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