# Progress card (goodtabs UI)

A goal with a monochrome bar, a mono count on the right and a check when it is met.

## Install

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

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

## Usage

```tsx
import { ProgressCard } from "@/components/ui/progress-card"

<ProgressCard label="Waitlist signups" value={1284} max={2000} footnote="Opens at 2,000" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` |  | What is being measured. |
| value | `number` |  | The current value. Clamped to 0 and max for the bar. |
| max | `number` | `100` | The goal. |
| format | `(value: number, max: number) => string` | `"1,284 / 2,000"` | Formats the count on the right. |
| footnote | `string` |  | One quiet line under the bar. |

## When to use

- Quotas, usage and goals on a dashboard or settings page
- A funding or signup target on a marketing page
- Any count that only makes sense next to its ceiling

## When not to use

- Indeterminate loading; use a spinner or skeleton
- Many bars to compare at once, where a chart does better
- Values with no ceiling; use stat-card

## Notes for agents

- Server component. It extends shadcn's Card, so className and other div props pass through
- format is a function; pass it from a server or client component alike, the card itself holds no state
- The bar is monochrome by design, bg-foreground on bg-muted; the check mark is the only completion signal
- The fill width animates over 200ms when value changes and not at all under prefers-reduced-motion

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