# Metric Card

One number with its trend, a period switch, and the segments behind it.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/metric-card
```

## Usage

```tsx
import { MetricCard } from '@/components/fetaui/metric-card'

export function Example() {
  return <MetricCard title="Revenue" periods={periods} defaultPeriod="30D" />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| periods | MetricPeriod[] | required |
| title | ReactNode | Revenue |
| period | string |  |
| defaultPeriod | string | first period |
| onPeriodChange | (period) => void |  |
| defaultDay | number or null | null |
| defaultSegment | string or null | null |
| format | (value) => string | $0 |
| animated | boolean | true |

## When to use

- For the one number a dashboard opens on.
- When the trend and the split both matter.

## When not to use

- For a small tile: use Bento Widget.
- For several series: use a Line chart.

## Accessibility

- The chart is a slider whose value reads the day and amount.
- A hidden table carries every day for screen readers.
- A segment row uses aria-pressed.
- The trend Badge carries a direction glyph, not only colour.

## Motion

- The line and area draw left to right over 600 ms on first view.
- Changing the period morphs the line in 400 ms and rolls the digits.
- The crosshair follows the pointer and snaps to the nearest day.
- Focusing a segment fades other rows to 40% and other bars to 30% in 150 ms.
- With reduced motion, charts appear at final values and digits swap in place.