Product Card 27 block design & features
A compact horizontal shadcn/ui product card for a candle. A small square photo sits beside the product name, scent and size, with a round quantity stepper and the line total underneath. Below them, a three-part price strip lists the volume tiers, followed by a full-width Add to cart button.
Stepping the quantity up moves a white highlight across the tier strip as each price break is reached, recalculates the line total, shows the full price struck through once a discount applies, and updates the button to say how many will be added. The stepper stops at one and at a maximum quantity.
The stepper buttons have labels and disabled states, the quantity is an output that is announced politely, and the highlight slide respects reduced motion. Tiers are props, each with a minimum quantity, a label and a unit price.