Product Card 25 block design & features
A shadcn/ui product card for a low-top sneaker. The card sits on a flat coloured surface with a tall rounded photo, the brand and product name, the price, a row of round colour swatches with the colourway name beside them, and a full-width Add to bag button.
Picking a swatch crossfades the photo to that colourway and eases the card's background to a matching soft tone, so forest suede sits on pale green and burgundy canvas on pale rose. Each colourway in the props carries its own image, swatch class and surface class, so new colours only need one more entry.
The swatches are toggle buttons with pressed states and labels, the colourway name is announced politely when it changes, and the colour and opacity transitions switch off when reduced motion is requested. Background tones have dark mode pairs.