Compare Products 9 block design & features
A headphone comparison built with shadcn/ui. A segmented control above four product cards lets shoppers choose what matters most: overall rating, price, battery, noise cancelling or weight. Each card shows a square photo, brand, model name and the full spec list.
Choosing a priority re-ranks the cards and they slide into their new order, so the best match always lands first with a badge such as Longest battery or Lightest and a primary button. The chosen spec is highlighted on every card for an easy scan across the row. The slide is skipped when reduced motion is requested.
A good fit for small ranges where different shoppers will weigh the same specs differently. Products, criteria, labels and formatting are props, and the cards fall back to two columns and then one on smaller screens.