Pricing 77 - Plan A vs. plan B diffPro
Two plan selects set up a head-to-head diff with a "show only differences" switch, a price delta line and an upgrade CTA.
About Pricing 77
Two plan selects set up a head-to-head diff with a "show only differences" switch, a price delta line and an upgrade CTA.
Pricing 77 is a pricing block for React and Tailwind CSS, included in Chocolate UI Pro. It ships as 99 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
- diff
- select
- switch
- upgrade
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add pricing-77Dependencies installed automatically: lucide-react.
Uses: button, label, reveal, select, switch, utils.
Usage
import Pricing77 from "@/components/blocks/pricing-77"
export default function Page() {
return <Pricing77 />
}