Pricing and tiers

Real-time pricing calculator for SaaS

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.