Product Detail 51 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.
A rail of four small thumbnails floats on the left edge of the photo. Picking one glides a frame onto it and reveals that view with a vertical clip wipe, down for views lower in the rail and up for views above. A small label in the corner rolls to the view's name. 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 rail supports arrow keys. On mobile the thumbnails move to the top corner and the photo stacks above the details. Reduced motion crossfades the photos.