Product List 39 block design & features
A home goods listing with filters, sort, grid or list views and product cards with color swatches. Each card has a compare checkbox, and picked products dock into a tray fixed to the bottom of the screen with up to three slots.
Checking a product flies its photo from the card into the next tray slot with a shared layout animation, and the tray slides up when the first item lands. The compare button opens a dialog with one column per product covering price, material, color, dimensions and category. Columns stagger in, and removing one lets the rest glide together with layout springs. Specs live on each product in the data array.
Built with shadcn/ui Dialog, Checkbox, Sheet and Accordion; the tray is plain markup with motion so it behaves the same across primitive libraries. On phones the tray spans the screen width and the dialog columns scroll sideways.