Pricing 26 - Cumulative "everything in X, plus" cardsPro

Each plan card opens with an "Everything in X, plus" line and lists only the new features, connected by plus markers between cards.

About Pricing 26

Each plan card opens with an "Everything in X, plus" line and lists only the new features, connected by plus markers between cards.

Pricing 26 is a pro pricing block for React, built on shadcn/ui and Tailwind CSS with motion animations that respect reduced-motion settings. It ships as 101 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.

  • cumulative
  • everything-in
  • three-tier
  • incremental

Installation

  1. Add the Chocolate UI registry to your components.json (see the installation guide).
  2. Run the shadcn CLI:
npx shadcn@latest add @chocolate/pricing-26

Dependencies installed automatically: lucide-react, motion.

Uses: button, reveal, use-reduced-motion, utils.

Usage

import Pricing26 from "@/components/blocks/pricing-26"

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

FAQ