Pricing and tiers

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.

From OlhaKit

Product card

Related Components

Modern Carousel
Hero Slider
Image Carousel (3D)
Video Image Carousel