fetaUI
GitHub

Order Tracking

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

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/order-tracking
Playground

Packed

Waiting for pickup in Altstetten

14:45

Delivery window 14:00 to 15:00

  1. Ordered
  2. Packed
  3. Out for delivery
  4. Arriving
  5. Delivered

Updates

  1. PackedTwo items wrapped and labeled
  2. Order confirmedHalden Studio accepted your order

Halden Studio

2 items
  • Oak lounge chairNatural oak, white glove
  • Glass carafe setCarafe and two tumblers

Seefeldstrasse 118, 8008 Zürich

Updated 11:40
Packed

Packed

Waiting for pickup in Altstetten

14:45

Delivery window 14:00 to 15:00

  1. Ordered
  2. Packed
  3. Out for delivery
  4. Arriving
  5. Delivered

Updates

  1. PackedTwo items wrapped and labeled
  2. Order confirmedHalden Studio accepted your order

Halden Studio

2 items
  • Oak lounge chairNatural oak, white glove
  • Glass carafe setCarafe and two tumblers

Seefeldstrasse 118, 8008 Zürich

Updated 11:40
Out for delivery

Out for delivery

Driver is 4 stops away

14:32

Delivery window 14:00 to 15:00

  1. Ordered
  2. Packed
  3. Out for delivery
  4. Arriving
  5. Delivered

Updates

  1. Out for deliveryPicked up by courier, 4 stops away
  2. PackedTwo items wrapped and labeled
  3. Order confirmedHalden Studio accepted your order

Halden Studio

2 items
  • Oak lounge chairNatural oak, white glove
  • Glass carafe setCarafe and two tumblers

Seefeldstrasse 118, 8008 Zürich

Updated 13:58
State
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/order-tracking

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.

Responsive behavior

  • 680 px on Web and 358 px on Mobile.
  • Mobile drops stage names and stacks the details.

Performance

  • All motion is CSS on transform and opacity. Stage bars fill with a scale and updates fade 40 ms apart, so nothing runs per frame in React.
  • It holds no timers and no state, so it re-renders only when its props change.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import OrderTracking. Required: stage, title, subtitle, eta, window, updates, store, items, address, updated, action.
  • stage is an index into stages. List updates newest first. Each is keyed by id, or by time plus title when id is missing.
  • action is one Button that changes with the stage. Stage data and the Button are static in the demo: connect both to your order feed.
/docs/components/order-tracking/markdown
PreviousFeature Voting
NextGoals Check-in

Related

ProgressComponentShows how far a task has come, with states for done, paused, failed and unknown length, plus nine recipes.TimelineProChartTimelines in the Soft card: Vertical with Timeline Item, Horizontal steps, Activity with avatars and a Compact log.CheckoutComponentExpress pay, billing period, plan options, seats, add-ons, billing and card fields, and a live order summary.Boarding PassComponentA flight pass as an inset card over a stub. The Badge stamps a new status and the field that changed sits in a chip.