# Order Tracking

Stage and ETA, a five stage track, a timeline of updates, the items and the address.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/order-tracking
```

## Usage

```tsx
import { OrderTracking } from '@/components/fetaui/order-tracking'

export function Example() {
  return <OrderTracking {...order} action={<Button>Contact store</Button>} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| stages | string[] | five stages |
| stage | number | required |
| title | string | required |
| subtitle | string | required |
| eta | string | required |
| window | string | required |
| updates | OrderUpdate[] | required |
| store | string | required |
| items | OrderLine[] | required |
| address | string | required |
| updated | string | required |
| action | ReactNode | required |
| animated | boolean | true |

## When to use

- After checkout, for one delivery.

## When not to use

- For many orders at once: use Table.

## Accessibility

- Stages are an ordered list with aria-current on the current one.
- Status is never colour only: labels repeat it.

## Motion

- The panel fades and rises 8 px over 400 ms, and updates fade in over 240 ms, 40 ms apart.
- Reached stage bars fill over 240 ms, 40 ms apart, and the head dot pops in after its bar. A new stage fills in place and its update fades in on top.
- With reduced motion, the panel only fades and stages and updates swap at once. animated={false} keeps everything still.