Building a pricing section usually means assembling cards by hand, hardcoding prices, and wiring toggles separately. SaaS Pricing Cards handles the entire section in one drop — billing toggle, plan cards, feature lists, savings calculations, and currency formatting — all from the Properties panel.
Most pricing components solve one problem — a toggle, a card, or a feature list. You connect them yourself.This is the full section in a single component.
The billing toggle calculates yearly pricing automatically. Feature lists are independent per plan, with up to 50 items each. Currency supports 150+ countries through a searchable dropdown. Everything updates live in the Framer editor.
Drop it on the canvas. Three plans appear with realistic defaults and a working billing toggle.
Change anything in the panel and it updates instantly — no Preview needed. Cards sit side by side on desktop and stack on mobile, based on the component’s container width.
BillingShow Toggle — shows or hides the monthly/yearly switch. Default: visible.Yearly % Off — one value controls all yearly prices and savings. Default: 20.Billing Label — the “Billed monthly/yearly” sub-line. Default: visible.Marketing Mode — monthly equivalent (price ÷ 12) or annual total. Default: monthly equivalent.Savings Badge — displays “Save $X/yr” per card when yearly is active. Auto-calculated. Default: on.
PlansUp to 4 plans. Each includes: Name, Tagline, Monthly Price, Highlight toggle, Badge Text, Inherit Line, Inherit Text, Button Label, Button Link (Framer native link picker), Button Opens, Button Style, Button Color, Button Text Color, Button Note.
Plan FeaturesOne independent array per plan. Up to 50 items each. Every item includes a Label and a State — Check or Cross. Visible in the panel only when that plan exists.
AppearanceAccent, Card Background, Section Background, Text, Muted Text, Card Border, Radius, Currency (150+ searchable options). Toggle colors are fully independent from card styles.
Font and Price SizeFramer’s native font picker. Price size ranges from 32–80px, with the currency symbol scaling proportionally.
LayoutMax Width, Highlight Scale, Card Gap, Mobile Breakpoint.
Full TypeScript source code3 pre-configured plans with realistic defaults — no blank-slate setupBilling toggle with automatic yearly pricing and savings calculationsPer-plan feature lists with up to 50 items each150+ currencies with a searchable dropdownResponsive layout — side-by-side on desktop, stacked on mobile40+ configurable propertiesFuture updates and bug fixes included
ARUNVIKRAM S
