Vertical shipment status with check, spinning, and pending dots connected by a tone-colored line, each row showing label and timestamp.
The import and the props worth knowing about, in one place.
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"
}
]}
/>Vertical delivery timeline where each stop lights up in turn as the connector fills downward and a timestamp fades in, pausing on Delivered before it replays.
Post-purchase card with an emerald check, order id, total price, a package-arrival line, and the receipt email destination.
Dashed-border receipt with the store name and order id, three monospaced quantity-name-price rows, a subtotal, and a bold final total with payment method.
Urgency row with a pulsing dot that flips emerald, amber, or rose by remaining stock, a watchers count, and a thin stock bar.