Pricing Calculator Glass is a dynamic, usage-based pricing component built for SaaS and subscription products. It renders two panels side by side on desktop and tablet, stacking vertically on mobile with the price output on top.
FEATURES
— 3 configurable base plans with individual pricing
— Team size slider with included seats and per-seat overage pricing
— 3 usage volume tiers with independent price multipliers
— Up to 4 toggleable add-ons with individual pricing
— Annual billing toggle with configurable discount percentage
— Animated count-up/count-down price display
— Full cost breakdown with line items
— CTA button with configurable link and text (supports {plan} variable)
— Dark aesthetic with fully customizable colors, opacities, and border radii
CUSTOMIZATION
Every visual and behavioral property is exposed in the Framer property panel — accent color, background gradient, card opacities, border radii, fonts, currency symbol, labels, and animation speed.
HOW TO USE
1. Drop the component onto your canvas
2. Set your plan names and base prices under the Plans section
3. Configure seats included and price per extra seat
4. Set your usage tier labels, descriptions, and price multipliers
5. Add up to 4 optional add-ons with names and prices — leave name empty or price at 0 to hide
6. Set your annual discount percentage and toggle its visibility
7. Paste your CTA link and customize the button text — use {plan} to dynamically insert the selected plan name
8. Adjust colors, fonts, and spacing to match your brand
Jephthah Ledum
