Product List 46 block design & features
A product grid of lamps, mugs, vases and teapots with brand labels, prices, New badges and color dots on items that come in more than one finish. A bar above the grid holds a segmented control for All, Kitchen, Lighting and Vases, an In Stock switch and a sort select from shadcn/ui.
Choosing a room slides the white segment indicator to the new option and the grid reflows as products leave and arrive. Turning on In Stock moves sold out products out of the grid and into a Back soon list at the end, where each one becomes a compact row with a small thumbnail, the brand, the name, the price and a Notify me button. The photo travels from the card to the thumbnail with a shared layout animation, and turning the switch off sends it back. Rooms, stock status, variants and sort options are all fields in the product data.
On mobile the segmented control spans the full width, the grid is a single column and the Notify me buttons shrink to icons with accessible labels. Reduced motion skips the travel and swaps states instantly.