Cart
The cart row and the checkout progress track.
Ceramic Pour-Over Mug
Color: Sand
$38.00
Linen Apron
Size: M
$54.00
Subtotal: $146.00
Totals are yours
CartItem renders one line and reports quantity changes; it never sums anything. Subtotals, tax, shipping and discounts stay in your own state, which is the only place they can be computed consistently with the server.
Sale pricing
Ceramic Pour-Over Mug
$38.00$28.00
Checkout steps
Like Stepper, a single index drives every step's state, so no combination of flags can contradict itself.
Cart
Shipping
Payment
Confirmation
Bag
Delivery
Payment
Done
CartItem props
| Prop | Type | Default | Description |
|---|---|---|---|
| image / imageAlt | string | Thumbnail and alt text. | |
| name | string | Product name. | |
| variant | string | The chosen options as one line, e.g. "Color: Sand". | |
| price | number | Unit price as a raw number. | |
| compareAtPrice | number | Was-price; switches to the sale treatment. | |
| quantity | number | Controlled quantity. | |
| onQuantityChange | (quantity: number) => void | Fires with the new quantity. | |
| minQuantity / maxQuantity | number | Bounds for the stepper. | |
| onRemove | () => void | Remove handler. | |
| removeLabel | string | Label for that control. | |
| formatPrice | (amount: number) => string | Override the default USD formatting. |
CheckoutSteps props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | string[] | Step labels. Has a sensible default set if omitted. | |
| currentStep | number | 0-indexed. Earlier steps render completed, later ones upcoming. |