# Order Tracking

> Status, shipment events, delivery estimates, and support.

- Category: Commerce
- Kind: block
- Page: https://uaiblocks.dev/components/order-tracking
- Registry item: https://uaiblocks.dev/r/order-tracking.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/blocks/order-tracking.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/order-tracking.json
```

## Usage

```tsx
"use client";

import {
  OrderTracking,
  OrderTrackingColumn,
  OrderTrackingDescription,
  OrderTrackingDetails,
  OrderTrackingEarlierEvents,
  OrderTrackingEstimate,
  OrderTrackingEvent,
  OrderTrackingEvents,
  OrderTrackingHeader,
  OrderTrackingHeading,
  OrderTrackingPanel,
  OrderTrackingStatus,
  OrderTrackingSupport,
  OrderTrackingSupportAction,
  OrderTrackingSupportActions,
  OrderTrackingTitle,
  type OrderTrackingVariant,
} from "@/components/uai/order-tracking";
import {
  DescriptionListDetails,
  DescriptionListItem,
  DescriptionListTerm,
} from "@/components/ui/uai/description-list";
import {
  OrderStatusBadge,
  OrderStatusHeader,
  OrderStatusProgress,
  OrderStatusStep,
  OrderStatusStepDescription,
  OrderStatusStepTitle,
  OrderStatusTitle,
} from "@/components/ui/uai/order-status";

export function OrderTrackingPreview({ variant = "split" }: { variant?: OrderTrackingVariant }) {
  return (
    <OrderTracking variant={variant}>
      <OrderTrackingHeader>
        <OrderTrackingHeading>
          <OrderTrackingTitle>Order FH-20418</OrderTrackingTitle>
          <OrderTrackingDescription>Placed Oct 2 · 3 items · $142.00</OrderTrackingDescription>
        </OrderTrackingHeading>
        <OrderTrackingEstimate>Thu, Oct 9 by 8 PM</OrderTrackingEstimate>
      </OrderTrackingHeader>
      <OrderTrackingColumn>
        <OrderTrackingStatus>
          <OrderStatusHeader>
            <OrderStatusTitle>Shipment progress</OrderStatusTitle>
            <OrderStatusBadge tone="progress">In transit</OrderStatusBadge>
          </OrderStatusHeader>
          <OrderStatusProgress>
            <OrderStatusStep status="complete">
              <OrderStatusStepTitle>Order confirmed</OrderStatusStepTitle>
              <OrderStatusStepDescription>Oct 2, 2:14 PM</OrderStatusStepDescription>
            </OrderStatusStep>
            <OrderStatusStep status="complete">
              <OrderStatusStepTitle>Packed and shipped</OrderStatusStepTitle>
              <OrderStatusStepDescription>Oct 4 from Portland, OR</OrderStatusStepDescription>
            </OrderStatusStep>
            <OrderStatusStep status="current">
              <OrderStatusStepTitle>In transit</OrderStatusStepTitle>
              <OrderStatusStepDescription>Arriving at your local hub</OrderStatusStepDescription>
            </OrderStatusStep>
            <OrderStatusStep status="upcoming">
              <OrderStatusStepTitle>Delivered</OrderStatusStepTitle>
            </OrderStatusStep>
          </OrderStatusProgress>
        </OrderTrackingStatus>
        <OrderTrackingPanel title="Shipment events">
          <OrderTrackingEvents>
            <OrderTrackingEvent
              latest
              dateTime="2026-10-07T07:42"
              time="Today, 7:42 AM"
              location="Oakland, CA"
            >
              Arrived at carrier facility
            </OrderTrackingEvent>
            <OrderTrackingEvent
              dateTime="2026-10-06T21:10"
              time="Yesterday, 9:10 PM"
              location="Sacramento, CA"
            >
              Departed sorting center
            </OrderTrackingEvent>
          </OrderTrackingEvents>
          <OrderTrackingEarlierEvents label="Show 2 earlier events">
            <OrderTrackingEvent
              dateTime="2026-10-04T16:30"
              time="Oct 4, 4:30 PM"
              location="Portland, OR"
            >
              Picked up by carrier
            </OrderTrackingEvent>
            <OrderTrackingEvent
              dateTime="2026-10-04T11:05"
              time="Oct 4, 11:05 AM"
              location="Portland, OR"
            >
              Shipping label created
            </OrderTrackingEvent>
          </OrderTrackingEarlierEvents>
        </OrderTrackingPanel>
      </OrderTrackingColumn>
      <OrderTrackingColumn>
        <OrderTrackingPanel title="Delivery details">
          <OrderTrackingDetails>
            <DescriptionListItem>
              <DescriptionListTerm>Carrier</DescriptionListTerm>
              <DescriptionListDetails>Westline Ground</DescriptionListDetails>
            </DescriptionListItem>
            <DescriptionListItem>
              <DescriptionListTerm>Tracking number</DescriptionListTerm>
              <DescriptionListDetails>WL 4410 2287 9035</DescriptionListDetails>
            </DescriptionListItem>
            <DescriptionListItem>
              <DescriptionListTerm>Ship to</DescriptionListTerm>
              <DescriptionListDetails>
                Rosa Iglesias, 418 Alder St, Oakland, CA 94607
              </DescriptionListDetails>
            </DescriptionListItem>
          </OrderTrackingDetails>
        </OrderTrackingPanel>
        <OrderTrackingPanel title="Need help with this order?">
          <OrderTrackingSupport>
            <p style={{ margin: 0 }}>
              If the package is late or arrives damaged, we will replace it or refund you.
            </p>
            <OrderTrackingSupportActions>
              <OrderTrackingSupportAction href="#support" emphasis="primary">
                Contact support
              </OrderTrackingSupportAction>
              <OrderTrackingSupportAction href="#return">Start a return</OrderTrackingSupportAction>
            </OrderTrackingSupportActions>
          </OrderTrackingSupport>
        </OrderTrackingPanel>
      </OrderTrackingColumn>
    </OrderTracking>
  );
}
```

## Anatomy

- `OrderTracking`
  - `OrderTrackingHeader`
    - `OrderTrackingHeading`
      - `OrderTrackingTitle`
      - `OrderTrackingDescription`
    - `OrderTrackingEstimate`
  - `OrderTrackingColumn`
    - `OrderTrackingStatus`
      - `OrderStatusHeader`
        - `OrderStatusTitle`
        - `OrderStatusBadge`
      - `OrderStatusProgress`
        - `OrderStatusStep`
          - `OrderStatusStepTitle`
          - `OrderStatusStepDescription`
    - `OrderTrackingPanel`
      - `OrderTrackingEvents`
        - `OrderTrackingEvent`
      - `OrderTrackingEarlierEvents`
      - `OrderTrackingDetails`
        - `DescriptionListItem`
          - `DescriptionListTerm`
          - `DescriptionListDetails`
      - `OrderTrackingSupport`
        - `OrderTrackingSupportActions`
          - `OrderTrackingSupportAction`

## Accessibility

- The block is a section labelled by the order title; each panel is a section labelled by its h3.
- Fulfillment progress uses Order Status, which names every step state in text, not color alone.
- Shipment events are an ordered list with machine-readable time elements, newest first.
- Earlier events sit behind a disclosure button with aria-expanded and aria-controls.
- Carrier, tracking number, and address use a Description List of term and detail pairs.