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 recalculates the price in real time as seats are added or removed. Instead of static three-column grids, plans behave like a connected system — the selected plan opens its features, the price formats itself in any of 12 currencies, and the entire frame resizes between a vertical mobile-friendly card and a wide horizontal desktop grid from a single property.
Built for SaaS landing pages, pricing pages, and any product that sells in tiers with per-seat or per-user pricing. The drawer-and-toggle interactions keep the page calm while still letting visitors compare options without scrolling away.
Vertical and Horizontal layout, switchable from the panel — the canvas frame auto-resizes between the two
Animated Monthly/Yearly toggle with sliding active-tab background (Framer Motion layoutId)
20% OFF (or any custom label) badge on the Yearly tab
Up to 8 plans, each with name, description, monthly price, yearly price, and a feature list
Live price recalculation — price × user count — updating with a smooth spring swap animation
User counter with +/- controls and animated digit count, configurable starting value and label
12 currencies via native Intl.NumberFormat (USD, EUR, GBP, JPY, CAD, AUD, CHF, CNY, INR, BRL, MXN, SGD)
Feature list separator is newline OR pipe | (Framer textarea-safe — pipes work when Enter is blocked)
Optional custom icons via Image controls — User icon and Feature checkmark
Drawer expand animation (height 0 → auto) with sequential feature slide-up cascade in vertical mode
CTA button with hover arrow slide-swap and tap scale — full-width in vertical, 25 % alongside the user counter in horizontal
Editable fonts for title, plan name, description, price, period, feature, user label, CTA, badge (9 Font controls)
Color controls — card, plan, muted background, border, muted text, foreground, primary, CTA, discount badge
Container-based responsive — uses ResizeObserver, not viewport — falls back to compact layout below 380 px
Ships with 3 plans pre-loaded (Plus, Standard, Advanced) and a Selected Plan default
Works on canvas and published site
SaaS landing pages with per-seat or per-user pricing
Storage and infrastructure plan selectors (1TB, 30 days recovery, encryption tiers)
Subscription product pages with monthly/yearly billing
Bootcamps and online course tier selectors
Membership and community access tiers
API and dev-tool pricing with seat scaling
Teams selling in tiers with per-seat pricing math
Designers who want one component that handles both compact mobile and wide desktop pricing
Brands that want a calm, connected pricing card instead of three competing columns
Framer users who need full font + color + layout control without touching code
Static pricing grids force visitors to scan three columns at once. Stepper modals hide options behind clicks. Pricing Plans Pro its between the two — a single connected interface where only the active plan opens, the price stays accurate as seats change, and the layout itself can be flipped between mobile-stacked and desktop-side-by-side from one Layout property. The drawer animation keeps the page calm, the live recalculation removes the mental math step, and the property controls let you match your brand without touching code.
Built for Framer. Drop it on your canvas and publish.
ONYRI Strategy
