Compare Products 1 - Up to three products with highlight differences
A side-by-side comparison table for up to three products with image headers, prices and spec rows, plus switches to highlight rows that differ or hide identical ones. Use it on electronics or appliance stores where shoppers weigh close alternatives.
About Compare Products 1
A side-by-side comparison table for up to three products with image headers, prices and spec rows, plus switches to highlight rows that differ or hide identical ones. Use it on electronics or appliance stores where shoppers weigh close alternatives.
Compare Products 1 is a free compare products block for React, built on shadcn/ui and Tailwind CSS. It ships as 109 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- compare
- table
- specs
- highlight
- differences
- switch
- ecommerce
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/compare-products-01Uses: button, label, reveal, switch, table, utils.
Usage
import CompareProducts01 from "@/components/blocks/compare-products-01"
export default function Page() {
return <CompareProducts01 />
}