Product Detail 33 block design & features
A fashion product page built with shadcn/ui. A two by two photo grid takes two thirds of the width, and a sticky column on the right holds the name, a star rating, sale pricing, size pills, color dots, a quantity stepper with an add to cart button, a collapsible spec list and share links.
Each color option has its own photo order in the data. Picking a color reorders the grid so that colorway's lead photos move into the front slots while the rest step back, with each cell animating its position on a spring and a short stagger. The selection ring slides between the color dots through a shared layout transition, and the color name below rolls over to the new label.
Photo order, sizes, stock and copy live in the data object. Reduced motion settings remove the movement. On mobile the grid keeps two columns above the product details so the reorder stays visible.