Product Detail 36 block design & features
A product detail page for a skincare serum built with shadcn/ui. A sticky image carousel with thumbnails and a lightbox sits beside the title, tags, star rating and summary. Below them is a bordered buy box, then the spec rows and the product information list.
The buy box is driven by a segmented control with a sliding highlight. Choosing Subscribe ticks the price from the one time price to the discounted price while the compare price crossfades. A panel opens with a second segmented control for 30, 45 or 60 day delivery and a timeline of the next three ship dates. The dots stagger in and spring to new positions when the interval changes. The discount, intervals, prices and copy all live in a single data object, and ship dates are calculated from today.
On mobile the gallery stacks above the details and the buy box keeps the quantity stepper, add button and wishlist on one row. Both segmented controls support arrow keys, and reduced motion swaps the slides and ticks for instant changes.