Product List 23 block design & features
A large All Products title sits above a ruled layout, with a Sort by select on the right. The left column lists the product count and collapsible filter sections for availability, price, size, color and category. The product grid sits in hairline cells beside it, built with shadcn/ui Accordion, Select, Slider and Sheet.
Each cell has a rounded photo that fades to a second image on hover, with a red discount badge on sale items and a star rating that appears on hover, then the product name and the price. A bag button over the photo slides a form over the card where the shopper picks a size, a color and a quantity before adding to the bag. Previous and next buttons with a page indicator close off the grid.
On smaller screens the sidebar and sort select move into a Filter and sort sheet, and the grid drops to fewer columns. Filters, sizes, colors and products come from a data constant at the top of the file.