component
Pricing Plans Pro
By ONYRI Strategy
Details
- ONYRI StrategyAuthor
- componentType
- $9.00Price
- 2026-06-06Published
- 2026-09-07Updated
- 2026-05-27Added
- InteractiveCategories
Summary
Pricing Plans Pro is a polished, interactive plan picker with an animated billing toggle, an expandable drawer that reveals each plan's features inline, and a user counter that…
Description
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.
Introduction
Live-price plan picker
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #100