## Order Tracker (S—144)

A vertical delivery timeline: completed steps get ticks and times, the current step pulses, and an ETA heads the card.

- URL: https://sundaeui.dev/components/order-tracker
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/order-tracker.json`
- Tags: timeline, stepper, shipping, status, order-tracking, delivery

Ordered, Shipped, Out for delivery, Delivered. The connecting line fills down to the current step, which has a slow pulsing ring so it reads as live.
Each step can carry a timestamp and a detail line such as the carrier or the place it was handed over.

### Usage

```tsx
import { OrderTracker } from '@/components/sundae/order-tracker'

<OrderTracker />
```

### Props

- `steps` (`{ label: string; time?: string; detail?: string }[]`, required): Steps in order.
- `current` (`number`, required): Index of the current step.
- `eta` (`string`): Estimated arrival text.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Order pages, delivery apps, shipment emails turned into pages.

### When not to use

- Processes without a fixed sequence.

### Accessibility

- An ordered list; the current step has aria-current="step" and completed steps say so in their label.
- Reduced motion removes the movement and keeps every state change.