Pricing Switch Card is a high-performance Framer code component that packs three distinct plans into a single, space-saving interface. Designed to eliminate the "jumping" layout shifts common in standard pricing tables, it uses a unique expanding toggle that morphs to reveal premium options without moving a single pixel on the rest of your page.
Drop it into your pricing section and it works instantly. The component handles the logic for Free, Monthly, and Annual tiers, featuring a fluid "sub-pill" animation that feels like a native app. With smart benefit filtering and automatic annual savings badges, it’s built specifically to turn browsers into subscribers.
Fully customizable from Framer’s property panel—adjust every color, radius, and text element to match your brand without writing a single line of code.
Expanding "Nested" Switch: A custom-built toggle that smoothly expands from two states to three using physics-based transitions.
Zero Layout Shift: Employs unique TriText logic to cross-fade plan names, prices, and descriptions in place, keeping your design stable.
Smart Benefit Filtering: Choose to show "locked" features with a strikethrough or hide them entirely based on the active plan.
Annual Savings Badge: A high-visibility, scale-animated badge that automatically highlights value when the user selects the annual tier.
Interactive CTA Engine: Per-plan link support via the Framer Link picker and button styles (Filled vs. Outlined) that update instantly.
20+ Property Controls: Every visual detail—from the crown icon size to the card's inner padding—is editable via the Framer panel.
Fully Responsive: The card and switch scale fluidly to fit any container, from mobile stacks to wide desktop grids.
Create Code File: Copy the component code and paste it into a new code file in Framer named PricingSwitchCard.tsx.
Add to Canvas: Drag the component onto your page—it defaults to a clean, professional layout.
Configure Benefits: Use the "✦ Benefits" array in the right panel to add your features and toggle their availability per plan.
Customize Style: Use the "📐 Switch" and "🎨 Card Style" sections to align the component with your brand's colors and radius.
Set Links: Click the Link picker for the Free, Monthly, and Annual sections to connect to your checkout or sign-up pages.
Annual Upsell: Use the "Badge Text" property in the Annual Plan section to call out specific savings (e.g., "Save 33%") to drive higher LTV.
Icon Customization: Toggle the Crown icon on or off in the switch settings to distinguish your premium tiers.
Interactive Feedback: The component includes built-in hover states and tap highlights for a tactile, premium feel.
All sales are final due to the nature of digital products. Please review the live demo before purchasing.
Free lifetime updates included. Have a question or need help with implementation? Reach out via email at mrammarilyes@gmail.com or connect on LinkedIn.
Ilyes Ammar
