About Pricing Section
Pricing Table Component — Monthly & Yearly Toggle with Smooth Animation
The last pricing section you'll ever need to build in Framer.
Designing a SaaS landing page, freelance portfolio, or product website? This clean, minimal Pricing Table component is built specifically for Framer — and it's ready to drop in, customize, and ship in minutes.
No code. No complexity. Just results.
✦ What's Inside
This component gives you a fully interactive, conversion-optimized pricing card with everything your users need to make a buying decision — all in one elegant, lightweight block.
At the top, a smooth monthly/yearly billing toggle lets visitors switch between plans instantly. When "Yearly" is selected, a "Save 20%" badge appears automatically — a proven conversion trick used by top SaaS products like Notion, Linear, and Loom. The price updates with a fade animation, making the interaction feel polished and intentional.
Below the toggle, your plan name, short description, and large price display are front and center — designed to communicate value at a glance. A clean feature checklist with green checkmarks lets you highlight up to 8 benefits. And a bold, full-width CTA button drives action — with a smooth hover state built in.
✦ Fully Editable from the Properties Panel
Every element is controlled through Framer component props — no need to dig into code:
Plan name & description
Monthly and yearly price
Feature list (up to 8 items)
CTA button label & link
Highlight/accent color
Default toggle state (Monthly or Yearly)
Change everything visually, directly inside Framer. It works seamlessly with Framer CMS too — perfect for agencies managing multiple client sites.
✦ Who Is This For?
This component is built for:
SaaS founders launching a product landing page
Freelance designers who want a ready-made pricing block
Agencies building Framer sites for clients
No-code builders who want professional results without writing a single line of code
✦ Design Details
Style: Clean Minimal — Light background, neutral tones
Typography: Inter/system sans-serif
Responsive: Works on desktop, tablet, and mobile
Interactions: Toggle animation, price fade, button hover
Border radius, shadows, and spacing follow modern UI standards
✦ Why This Component?
Most Framer pricing components are either too basic (just a static card) or too bloated (hard to customize). This one hits the sweet spot — simple enough to use in 5 minutes, powerful enough for a real product launch.
If you've ever spent hours rebuilding a pricing section from scratch, this component pays for itself the first time you use it.
