Pricing Plans Pro

Pricing Plans Pro is a polished, interactive pricing picker for SaaS and tiered products. It combines an animated billing toggle, expandable feature drawer, and live user-based pricing in one connected interface. Visitors can compare plans without leaving the page, while the component adapts seamlessly from mobile to desktop.

Key Features

• Vertical or Horizontal layout with automatic frame resizing

• Animated Monthly/Yearly toggle with customizable discount badge

• Up to 8 plans with names, descriptions, monthly/yearly prices, and features

• Live price calculation based on user/seat count with smooth animations

• Configurable user counter with +/- controls, starting value, and label

• 12 currencies via native Intl.NumberFormat: USD, EUR, GBP, JPY, CAD, AUD, CHF, CNY, INR, BRL, MXN, SGD

• Feature separators using newlines or |

• Optional custom user and feature icons

• Animated feature drawer with sequential slide-up effects

• Responsive CTA with hover and tap animations

• 9 editable font controls and extensive color customization

• Container-based responsiveness using ResizeObserver, with compact mode below 380px

• 3 pre-loaded plans: Plus, Standard, Advanced

• Works on both Framer Canvas and published sites

Where to Use

Ideal for SaaS pricing, per-seat subscriptions, storage and infrastructure tiers, bootcamps, memberships, communities, APIs, and developer tools.

Best For

Teams selling tiered products with per-user pricing, designers needing one responsive component, and Framer users who want complete visual control without coding.

Why This Component

Unlike static three-column pricing grids or stepper modals, Pricing Plans Pro keeps everything connected. The active plan reveals its features, pricing updates instantly as seats change, and the same component switches between mobile-stacked and desktop-horizontal layouts through a single property.

Built for Framer. Drop it onto your canvas, customize it, and publish.