Compare 8 - Two-product side-by-side specsPro
A side-by-side product spec comparison with a swappable product picker for each side, large product images and aligned spec rows where the better value is emphasised. Use it on ecommerce and hardware sites to help shoppers choose between two models in a product line.
About Compare 8
A side-by-side product spec comparison with a swappable product picker for each side, large product images and aligned spec rows where the better value is emphasised. Use it on ecommerce and hardware sites to help shoppers choose between two models in a product line.
Compare 8 is a compare block for React and Tailwind CSS, included in Chocolate UI Pro with motion animations that respect reduced-motion settings. It ships as 113 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
- products
- specs
- side by side
- ecommerce
- hardware
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add compare-08Dependencies installed automatically: lucide-react, motion.
Uses: button, reveal, select, utils.
Usage
import Compare08 from "@/components/blocks/compare-08"
export default function Page() {
return <Compare08 />
}