Order Tracker

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add order-tracker

Usage#

Anatomy#

A header that names the merchant and the stage, and the content under it: when it lands, the stages, the latest event, what is in the box, the numbers to quote and the actions. Every part under the header is droppable: a ride needs only the ETA and the update.

import {
  OrderTracker,
  OrderTrackerHeader,
  OrderTrackerMark,
  OrderTrackerTitle,
  OrderTrackerMeta,
  OrderTrackerStatus,
  OrderTrackerContent,
  OrderTrackerEta,
  OrderTrackerSteps,
  OrderTrackerStep,
  OrderTrackerUpdate,
  OrderTrackerMedia,
  OrderTrackerItems,
  OrderTrackerThumbnails,
  OrderTrackerItem,
  OrderTrackerSummary,
  OrderTrackerDetails,
  OrderTrackerDetail,
  OrderTrackerActions,
  OrderTrackerSkeleton,
} from "@/components/ui/order-tracker"

<OrderTracker>
  <OrderTrackerHeader>
    <OrderTrackerMark />
    <OrderTrackerTitle />
    <OrderTrackerMeta />
    <OrderTrackerStatus />
  </OrderTrackerHeader>
  <OrderTrackerContent>
    <OrderTrackerEta />
    <OrderTrackerSteps>
      <OrderTrackerStep />
    </OrderTrackerSteps>
    <OrderTrackerUpdate />
    <OrderTrackerMedia />
    <OrderTrackerItems>
      <OrderTrackerThumbnails>
        <OrderTrackerItem />
      </OrderTrackerThumbnails>
      <OrderTrackerSummary />
    </OrderTrackerItems>
    <OrderTrackerDetails>
      <OrderTrackerDetail />
    </OrderTrackerDetails>
    <OrderTrackerActions />
  </OrderTrackerContent>
</OrderTracker>

<OrderTrackerSkeleton />

Status#

Six, set once on the root with status. The chip words and tones itself from it, the bars fill up to the matching stage, and the timing pill turns amber when the order is delayed. A cancelled order keeps its ETA struck through and its bars greyed at the stage it reached, set with value, so the reply still says how far it got.

Live updates#

Pass live while the order is moving and feed the card new props as events arrive. The status label rolls to the next stage, the fill slides one bar along on the same settle curve the Stepper uses, the current bar breathes, and the update line is a polite live region. Wrap the ETA in AnimatedNumber and the update in AnimatedLabel so only the characters that change move.

Compact#

layout="compact" turns the header into one line you can click: the mark, the merchant over the stage, and the ETA on the right over its timing. A live row leads the stage with a spinner. The card grows to show the rest, the same object getting taller rather than a panel swapping in. Use it when the assistant lists several orders.

With a map#

For a ride or a courier, put a Map in OrderTrackerMedia: the frame insets it 8px from the card with a concentric radius. The route is an app layer in the theme's brand colour, and the courier is a photo pin that pings.

In a conversation#

A parcel lookup, as a support assistant answers it: the stages a carrier uses, the last scan, the thumbnails and total of what is in the box, and the order and tracking numbers with a copy button each. The card takes the full width of the reply, with no bubble around it.

Where is my order from Clay & Kiln?

It left the Newark sorting facility this morning and is on track for Thursday. UPS is carrying it; the tracking number is below if you want to follow it yourself.

Clay & KilnOrdered Nov 2In transit

Arrives

Thu, Nov 6On time

1Ordered, done

2Shipped

3Out today

4Delivered

Departed the Newark sorting facility · , Today, 6:12 AM

3 items · $124.00

Order

CK-20931

Carrier

UPS Ground

Tracking number

1Z 999 AA1 01 2345 6784

Get helpTrack on UPS

Show code

X-ray

Loading#

While the lookup streams in, OrderTrackerSkeleton holds its place in the same frame, with the lines and the four bars where they will land.

API reference#

FAQ#