---
title: "Pricing Plans Pro — Framer component · Best of Framer"
description: "$9.00 · Framer component · by ONYRI Strategy · Interactive. Pricing Plans Pro is a polished, interactive plan picker with an animated billing toggle, an expandable drawer that reveals each…"
canonical: "https://framer.elliotli.dev/component/pricing-plans-pro"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Pricing Plans Pro

# Pricing Plans Pro

Live-price plan picker

[View on Framer](https://framer.com/marketplace/components/pricing-plans-pro/?via=elliot-li)

![Pricing Plans Pro preview image 1](https://framer.elliotli.dev/og/component/pricing-plans-pro/365e879fd78dc524/1600x1200.jpg)

## 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #759

## Details

- **Author**: ONYRI Strategy
- **Price**: $9.00
- **Published**: 2026-06-06
- **Updated**: 2026-09-07
- **Added**: 2026-05-27
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step