Compare Products 2 - Bottom compare tray
A product grid with compare checkboxes that slides up a sticky bottom tray showing up to three selected products in slots, with remove, clear and Compare now actions. Use it on category listings to let shoppers collect candidates while they browse.
About Compare Products 2
A product grid with compare checkboxes that slides up a sticky bottom tray showing up to three selected products in slots, with remove, clear and Compare now actions. Use it on category listings to let shoppers collect candidates while they browse.
Compare Products 2 is a free compare products block for React, built on shadcn/ui and Tailwind CSS with motion animations that respect reduced-motion settings. It ships as 111 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
- tray
- drawer
- checkbox
- product grid
- sticky
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-02Dependencies installed automatically: lucide-react, motion.
Uses: button, checkbox, reveal, use-reduced-motion, utils.
Usage
import CompareProducts02 from "@/components/blocks/compare-products-02"
export default function Page() {
return <CompareProducts02 />
}