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.
The import and the props worth knowing about, in one place.
import { Commerce34 } from "@/components/beste/piece/commerce34";
<Commerce34
orderLabel="Order 4821"
stops={[
{
"label": "Ordered",
"time": "Mon 09:12"
},
{
"label": "Packed",
"time": "Mon 14:40"
},
{
"label": "Shipped",
"time": "Tue 08:05"
},
{
"label": "Out for delivery",
"time": "Wed 07:30"
},
{
"label": "Delivered",
"time": "Wed 11:52"
}
]}
tone="emerald"
/>Vertical shipment status with check, spinning, and pending dots connected by a tone-colored line, each row showing label and timestamp.
Post-purchase card with an emerald check, order id, total price, a package-arrival line, and the receipt email destination.
Product card whose stock bar shrinks a few units at a time as the Only N left badge warms from neutral to amber to rose, sells out, then restocks.
Four-step checkout stepper: the connector fills toward the next node while each summary panel slides in from the right, ending on a placed order with a check.
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.