Product Detail 54 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, view tabs, color swatches, size row, inline size guide and add to cart.
The view switcher lives with the buying options rather than on the photo. Front, Angle, Side and Detail sit as text tabs under the price, with an underline that glides to the active tab. Choosing a tab to the right wipes the photo in from the right, and a tab to the left wipes from the left, so the image stays clean. 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 tabs support arrow keys. On mobile the photo stacks above the details. Reduced motion crossfades the photos.