Shopping Cart 29 block design & features
A gift-ready shopping cart composed with shadcn/ui. A compact bordered list shows each item with a square photo, name, details, quantity and line price, followed by a bordered gift options box with a switch labelled This order is a gift. An order summary column on the right lists subtotal, shipping and total above a checkout button.
Hovering a product thumbnail shows a soft wash with an expand icon, and clicking it opens a lightbox with a large photo, the name, details and price, a counter, and previous and next buttons that also follow the arrow keys. Turning the gift switch on expands the box to show three wrapping paper tiles with flat colour swatches and prices, a gift note input with a character counter, and a small tag-shaped preview beside them. The note appears on the tag in italic serif type as it is typed, the tag's top band takes the colour of the chosen paper, and a Gift wrap line slides into the summary with the paper name and cost. Turning the switch off collapses the panel and removes the line again, with all height and colour transitions disabled under reduced motion.
The block has a warm, considered feel thanks to the serif note and paper swatches, while everything else stays neutral with hairline borders. It is moderately complex and mostly content-driven, needing product photos and a set of wrap options. On smaller screens the tag preview sits below the wrap and note controls and the summary moves under the cart.