Pricing and tiers

Pricing and tiers

About Pricing and tiers

What's included:

  • 3 plan tiers: Starter, Pro, Scale: price updates automatically

  • Slider for seat/unit count with live price calculation

  • Annual billing toggle with 20% discount applied in real time

  • Animated price display: smooth fade on every change

  • Price breakdown showing tier, units, and discount

  • 5 accent colors: Black, Blue, Green, Red, Purple

  • Light and dark theme

  • Fully customizable: labels, base price, currency, billing period, slider range.

How to use:

  1. Copy the component into your Framer project

  2. Set your base price and billing period in the property controls

  3. Customize slider label, min/max range, and unit label to match your product

  4. Choose your accent color and theme

  5. Drop it on your pricing page, interactions work out of the box.