Product List 26 block design & features
A Filter button and a Sort button sit above a full bleed, three column grid of square product photos with the name and price underneath, divided by hairlines and built with shadcn/ui. Each tile fades to a second photo on hover.
On desktop, Filter expands an inline panel with columns for availability, shape, size, color, material and a price range slider with inputs. Sort opens a short menu of sort options with the current choice ticked.
On phones the filters open in a sheet instead of the inline panel and the grid drops to fewer columns. The filter groups, sort options and products come from a data constant at the top of the file.