Shopping Cart 28 block design & features
A shopping cart built with Shadcn UI around a spend-based reward track. A heading and a status line sit above a horizontal progress bar with two milestone markers, one for free shipping and one for a free canvas tote, each labelled with its threshold. Below it, a three-column grid shows landscape product photos with names, details, line totals and quantity steppers, and the last cell holds the free gift. A footer row lists subtotal, shipping and total next to a checkout button.
Raising a quantity updates the line total and subtotal, fills the bar, ticks each milestone marker as it is reached and rewrites the status line with the amount still needed. The gift cell starts faded and greyscale with a small badge showing how far away it is, then turns to full colour with its value struck through and marked Free once the threshold is passed, and shipping drops to free at the first milestone. The bar fill and photo transitions are smooth but brief, and they stop when reduced motion is preferred.
The styling is flat and neutral with a single primary accent on the bar and markers, which keeps attention on the photography and the numbers. It is a moderately complex, content-driven block that needs product photos plus one gift photo, and it reads as a fresh take on the usual free-shipping banner because the reward sits in the grid as a product. The grid stacks to two columns on tablets and one on phones.