Product Comparison Table React component
A side-by-side product comparison with a sticky header of photos, prices, ratings and Add to cart buttons, collapsible spec groups, yes/partly/no marks, bars and Best badges for measured specs, a Show differences only switch, column hover, removable and re-addable products, and a sticky first column when it scrolls sideways on phones.
About the Product Comparison Table component
Product Comparison Table lines up similar products so shoppers can see the trade-offs at a glance. Product photos, prices and Add to cart stay pinned at the top while the specs scroll underneath.
Measured specs get bars and a Best badge, yes-or-no features get clear marks, and a single switch hides everything the products have in common so only the real differences remain. Products can be removed and added back to narrow the choice.
When to use it
Use it for categories where people compare specs before buying, such as electronics, appliances, mattresses or subscription plans, on a compare page or below a product family.
Keep it to two to four products. With more columns the table gets hard to scan, especially on phones; let shoppers pick what to compare instead.
Installation
Add the Product Comparison Table component to your project with the shadcn CLI. It lands in components/product-comparison-table.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/product-comparison-tableOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeCollections
Use-case pages that compare Product Comparison Table with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Product Comparison Table FAQ
- How do I mark which value is best?
- Give a numeric row better: 'higher' or 'lower' and a unit. The block finds the winner among the visible products, draws bars relative to it and adds a Best badge. Rows without better just show the number.
- How does Show differences only work?
- It hides rows where every visible product has the same value. The count in the header updates when products are removed, because two products can match on rows where three didn't.
- Why doesn't the header stick on phones?
- On narrow screens the table scrolls sideways, and a horizontally scrolling box can't also pin a header to the page. The feature column sticks on the left instead, so each value keeps its label.
- Can I use it for pricing plans?
- Yes. Use plans as products, put the price and a call to action in the header and use true, false and 'partial' for features. Text values work for limits such as '10 seats'.
- Is it accessible?
- The grid uses table, row, columnheader, rowheader and cell roles, yes-no marks include text, group toggles expose aria-expanded, remove buttons name the product and the differences switch is a labelled switch.
