Product List 42 block design & features
A clothing product list built around size. A sticky "Your size" bar with All and XS to XL sits above a three column grid of dresses, tops, outerwear and a bag, while category, color and price facets live in an accordion sidebar beside it.
Picking a size slides a pill indicator to your choice, and every card checks its own stock. Styles that come in your size stay bright and show "Only 2 left in M" or "In stock in M" under the price, while sold out or unmade styles fade to 40 percent and glide to the end of the grid with motion layout animation. The stock line cross-fades as the size changes, and the facets filter the grid in place.
Products carry per-size stock counts, with one-size accessories always fitting, and the title, products, facets and default size are props. Built with the shadcn/ui Accordion, Badge and Button plus motion/react, and reduced motion keeps the fades without the movement.
On mobile the accordion stacks above the grid, the size bar stays pinned to the top as you scroll, and the grid shows two columns.