5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T8d7,

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.

5a:[["$","$L5d",null,{"post":{"id":"019e9bed-dfa2-7d06-907e-d4d319582163","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"092b6e6a-5b7e-4e19-9a5a-4352c205c584","name":"ONYRI Strategy","slug":"onyri-strategy","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1412066/avatar-kHGXusqZB1syGd3pNBioephGEmuqkO.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"9PjXeXxuJfs0Rs0PjmZ7","resolved":true,"title":"Pricing Plans Pro","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Pricing Plans Pro","marks":[{"type":"bold"}]},{"type":"text","text":" 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."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Vertical or Horizontal layout with automatic frame resizing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated Monthly/Yearly toggle with customizable discount badge"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 8 plans with names, descriptions, monthly/yearly prices, and features"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Live price calculation based on user/seat count with smooth animations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Configurable user counter with +/- controls, starting value, and label"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"12 currencies via native "},{"type":"text","text":"Intl.NumberFormat","marks":[{"type":"code"}]},{"type":"text","text":": USD, EUR, GBP, JPY, CAD, AUD, CHF, CNY, INR, BRL, MXN, SGD"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Feature separators using newlines or "},{"type":"text","text":"|","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional custom user and feature icons"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated feature drawer with sequential slide-up effects"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive CTA with hover and tap animations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"9 editable font controls and extensive color customization"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Container-based responsiveness using ResizeObserver, with compact mode below 380px"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"3 pre-loaded plans: Plus, Standard, Advanced"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Works on both Framer Canvas and published sites"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Where to Use"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Ideal for SaaS pricing, per-seat subscriptions, storage and infrastructure tiers, bootcamps, memberships, communities, APIs, and developer tools."}]},{"type":"customHeading","content":[{"type":"text","text":"Best For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Teams selling tiered products with per-user pricing, designers needing one responsive component, and Framer users who want complete visual control without coding."}]},{"type":"customHeading","content":[{"type":"text","text":"Why This Component"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Unlike static three-column pricing grids or stepper modals, "},{"type":"text","text":"Pricing Plans Pro","marks":[{"type":"bold"}]},{"type":"text","text":" 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."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for Framer. Drop it onto your canvas, customize it, and publish."}]}]},"introduction":"Live-price plan picker","slug":"pricing-plans-pro","author":{"framerUserId":"092b6e6a-5b7e-4e19-9a5a-4352c205c584","name":"ONYRI Strategy","slug":"onyri-strategy","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1412066/avatar-kHGXusqZB1syGd3pNBioephGEmuqkO.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/9PjXeXxuJfs0Rs0PjmZ7/pricing-plans-pro-WyhpyKYJSDzIGeDrLbylvfwlnAgGu3","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-27T09:49:12.030Z","updatedAt":"2026-09-07T20:01:29.641Z","publishedAt":"2026-06-06T07:55:18.306Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://pricing-card-by-onyri-strategy.framer.website/","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_jJzvL7rbaFA8l3SY1QeUGyRM1wifE1cAfbFcm2oRWUZ","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"yB2wPbQ0rv7jAZJmpPVu","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":55,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-06T07:55:18.306Z","updatedAt":"2026-06-06T07:55:18.306Z","reported":false}}],"$L5f"]

Suggested for you