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

Sticky Feature Tabs
Coach Deck Reveal
Pinned Quote Cards
Timeline Flow

Related Components

Hero Dark Slideshow
Cursor Reactive Hero
Step Flow
Pocket Team Card