Product List 44 block design & features
A sneaker listing built from shadcn/ui cards, with a title, a sort select and a single filter row underneath. Colorways are grouped, so each card is one model with its own swatch dots, a colorway name, a color count, the price and an Add to Cart button. The filter row holds a set of color swatches and a run of US sizes, with a style count and a reset link below it.
Picking a color swatch narrows the grid to models that come in that color and switches each remaining card to the matching colorway with a crossfade. Cards with no match fade out and the rest reflow into place, while a shared outline slides between the active swatches. Clicking a dot on a card reveals the new colorway with a horizontal clip-path wipe, and the price rolls to the new amount. Models, colorways, color families, sizes and sort options all live in one data object at the top of the file.
On mobile the swatches and sizes wrap onto their own lines and the grid drops to a single column. Every swatch is a real button with a label and pressed state, and under reduced motion the wipes become simple fades.