# Order Timeline

> Five-step fulfilment progress for an order: Placed, Paid, Packed, Shipped, Delivered.

Component · Commerce · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/OrderTimeline/)

Five-step fulfilment progress for an order: Placed, Paid, Packed, Shipped, Delivered.

Props: `status` (one of the five, or "Refunded" / "Cancelled" which dims the line and shows a badge), `times` ({step: text}).

- Use the same five words as the order status badges, so list and detail agree.
- The current step gets a sky ring and a clock until it's done.

## Example

```tsx
import { OrderTimeline } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-panel"
      style={{
        gap: 32,
      }}
    >
      <OrderTimeline
        status="Shipped"
        times={{
          Placed: "Apr 12, 09:14",
          Paid: "Apr 12, 09:15",
          Packed: "Apr 12, 15:40",
          Shipped: "Apr 13, 08:02",
        }}
      />
      <OrderTimeline
        status="Paid"
        times={{
          Placed: "Just now",
          Paid: "Just now",
        }}
      />
      <OrderTimeline status="Refunded" />
    </div>
  );
}
```

## Props

### OrderTimeline

| Prop | Type | Notes |
| --- | --- | --- |
| `status` | `"Placed" \| "Paid" \| "Packed" \| "Shipped" \| "Delivered" \| "Refunded" \| "Cancelled"` | Required |
| `times?` | `Record<string, string>` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |