Compare 3 - Three-plan feature matrix withPro

Three-plan feature matrix with a sticky plan header and grouped sections; the recommended column is subtly tinted.

About Compare 3

Three-plan feature matrix with a sticky plan header and grouped sections; the recommended column is subtly tinted.

Compare 3 is a compare block for React and Tailwind CSS, included in Chocolate UI Pro. It ships as 123 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.

Installation

  1. Set up your project with npx chocolateui init and npx chocolateui login (see the installation guide).
  2. Run the Chocolate UI CLI:
npx chocolateui add compare-03

Dependencies installed automatically: lucide-react.

Uses: button, reveal, utils.

Usage

import Compare03 from "@/components/blocks/compare-03"

export default function Page() {
  return <Compare03 />
}

FAQ