Vertical shipment status with check, spinning, and pending dots connected by a tone-colored line, each row showing a label and an optional timestamp.
The import and the props worth knowing about, in one place.
import { Commerce22 } from "@/components/beste/piece/commerce22";
<Commerce22
tone="foreground"
steps={[
{
"label": "Order placed",
"status": "done"
},
{
"label": "Packed",
"status": "done"
},
{
"label": "Shipped",
"time": "Apr 21, 4:30pm",
"status": "active"
},
{
"label": "Delivered",
"time": "Estimated Apr 22",
"status": "pending"
}
]}
bordered={false}
/>