Compare Products 7 block design & features
A sofa comparison table built with shadcn/ui. Three products head the columns with a photo, name, price and add-to-cart button, and below them the specs are grouped under Size, Materials and Delivery.
Rows where every product has the same value are set in muted text, so the differences already stand out. Turning on Show differences only collapses those matching rows with a smooth height animation, removes them from the accessibility tree and notes how many were hidden; turning it off brings them back. Groups whose rows all match collapse with them.
Useful wherever products share most of their specs and shoppers need to see what actually separates them. Products, groups and rows are props, the grid adapts to any number of products, and the table scrolls sideways on narrow screens.