Rate Card 2 - Packages with add-ons and live total

An agency rate card with three selectable service packages, a list of optional add-ons with checkboxes and a sticky summary that totals the quote live. Use it on studio or freelancer pages so prospects can build their own estimate.

About Rate Card 2

An agency rate card with three selectable service packages, a list of optional add-ons with checkboxes and a sticky summary that totals the quote live. Use it on studio or freelancer pages so prospects can build their own estimate.

Rate Card 2 is a free rate card block for React, built on shadcn/ui and Tailwind CSS. It ships as 132 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.

  • rate card
  • packages
  • add-ons
  • quote
  • agency
  • pricing
  • calculator

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/rate-card-02

Dependencies installed automatically: lucide-react.

Uses: button, checkbox, reveal, utils.

Usage

import RateCard02 from "@/components/blocks/rate-card-02"

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

FAQ