Product Detail 52 block design & features
A product detail page for a hoodie built with shadcn/ui. A tall model photo sits beside a sticky panel with the title, sale price, color swatches, size row, inline size guide and add to cart.
Under the photo, a wide scrubber has a stop for each view and a label beneath it. Drag the handle and the photo wipes sideways to the nearest view as you pass each stop, then the handle springs onto it when you let go. Clicking a label jumps straight there, and the filled part of the track shows how far through the views you are. Hovering or focusing a size lifts in a popover with chest and length, and the inline guide follows that size, then the chosen size, then the model's size, in cm or inches.
The handle is a keyboard slider with arrow, Home and End keys. On mobile the photo and scrubber stack above the details. Reduced motion crossfades the photos and drops the springs.