Compare 6 - Collapsible category groups with differences filterPro
A four-product feature comparison with a sticky product header, collapsible category groups and a "show differences only" switch that hides rows where every product matches. Use it for detailed product line or edition comparisons where shoppers need to drill into specific areas.
About Compare 6
A four-product feature comparison with a sticky product header, collapsible category groups and a "show differences only" switch that hides rows where every product matches. Use it for detailed product line or edition comparisons where shoppers need to drill into specific areas.
Compare 6 is a compare block for React and Tailwind CSS, included in Chocolate UI Pro. It ships as 125 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
- feature table
- sticky header
- categories
- collapsible
- filter
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add compare-06Dependencies installed automatically: lucide-react.
Uses: reveal, switch, utils.
Usage
import Compare06 from "@/components/blocks/compare-06"
export default function Page() {
return <Compare06 />
}