Product Detail 39 block design & features
A shadcn/ui product detail page for a dining chair. The main square photo is a comparison of an oak frame shot and the seat detail shot, with a row of four thumbnails below. A sticky panel holds the title, sale price, stock bar, description, color and material options, quantity, cart buttons and service notes. Design and dimensions sit under the photos.
The divider is a Motion drag handle that clips the top photo as it moves. Picking Oak or Wool springs the divider toward that side and crossfades the material label. Dragging past either side switches the material too. Clicking a thumbnail fades that photo in on the oak side of the divider and brings the oak side into view, so every shot can still be compared with the seat detail. The handle is also a keyboard slider with arrow, Home and End keys. Materials, their photos and resting positions are defined in data.
On mobile the comparison stays full width above the details and the handle works with touch. Reduced motion jumps the divider instead of springing it.