Toggle Pricing Table

Toggle Pricing Table
Toggle Pricing Table

About Toggle Pricing Table

Toggle Pricing Table is a dark, modern pricing section for Framer with a Monthly / Annual billing toggle. Switch the toggle and every plan price updates instantly with a smooth number animation, while a 'Save 20%' badge highlights the yearly discount. A glowing 'Most Popular' plan in the middle guides visitors to the plan you want them to choose.

What's included:

- Monthly / Annual pricing toggle with a 'Save %' badge

- Three pricing plans: Starter, Pro and Enterprise

- Highlighted 'Most Popular' plan with green glow and accent button

- Plan name, short description, price, billing note and CTA button on every card

- Feature list with check icons for each plan

Features:

- Animated price change when switching between monthly and yearly billing

- Edit plan names, prices, discount, features, buttons and links from the property controls

- Easy to restyle — change colours, accent, fonts and corner radius

- Fully responsive — cards stack neatly on tablet and mobile

- Lightweight code component, no code needed

Perfect for SaaS, AI tools, apps, subscription products, agencies and startups that need a clean, conversion-focused pricing page or pricing section.

From Bhavin Hirpara

Integrations Logo
Studio Scroll Hero
Timeline Flow
Horizontal Cards

Related Components

Avatar Testimonial
Testimonial Reveal
Black Hole Galaxy
Unit Story