Product Detail 38 block design & features
A product detail page for a hoodie built with shadcn/ui. A single tall model photo with a view toggle sits beside a sticky panel with the title, sale price, color swatches, size row, inline size guide and add to cart.
The Front, Angle, Side and Detail toggle moves its highlight with a shared layout animation and reveals the next photo with a vertical clip wipe. Moving forward wipes down from the top and moving back wipes up. Hovering or focusing a size lifts in a small popover with chest and length. The inline guide follows that size, then the chosen size, then the model's size, and switches between cm and inches. The model's size is outlined in the row. Views, sizes, stock and measurements come from data.
On mobile the photo stacks above the details and the inline guide stands in for the hover popover. The toggle supports arrow keys, and reduced motion crossfades the photos.