About this piece
Checkout Steps
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.
Usage
The import and the props worth knowing about, in one place.
import { Commerce32 } from "@/components/beste/piece/commerce32";
<Commerce32
steps={[
{
"label": "Cart",
"lines": [
"Two items",
"Subtotal $58.00"
]
},
{
"label": "Shipping",
"lines": [
"Nina Simone",
"Express, arrives Thursday"
]
},
{
"label": "Payment",
"lines": [
"Visa ending 4417",
"Total $64.50"
]
},
{
"label": "Done",
"lines": [
"Order placed",
"Confirmation sent to [email protected]"
]
}
]}
tone="primary"
bordered={false}
/>