Order Tracking

Vertical shipment status with check, spinning, and pending dots connected by a tone-colored line, each row showing label and timestamp.

Tracking1Z999AA10123456784
  1. Order placedApr 20, 2:14pm
  2. PackedApr 21, 9:00am
  3. ShippedApr 21, 4:30pm
  4. DeliveredEstimated Apr 22

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Commerce22 } from "@/components/beste/piece/commerce22";

<Commerce22
  trackingId="1Z999AA10123456784"
  tone="foreground"
  steps={[
    {
      "label": "Order placed",
      "time": "Apr 20, 2:14pm",
      "status": "done"
    },
    {
      "label": "Packed",
      "time": "Apr 21, 9:00am",
      "status": "done"
    },
    {
      "label": "Shipped",
      "time": "Apr 21, 4:30pm",
      "status": "active"
    },
    {
      "label": "Delivered",
      "time": "Estimated Apr 22",
      "status": "pending"
    }
  ]}
/>