5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/0jb7r9vkvbp9b.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/0r0dvtn0sg1wd.js","/creators-assets/_next/static/immutable/chunks/07625_8djzdg3.js","/creators-assets/_next/static/immutable/chunks/2e6uhasjhfbil.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/0t3q4gzvfui5n.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/30smfjlh8o71p.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/2a2w_2tavj0_e.js","/creators-assets/_next/static/immutable/chunks/3f-jmjjx_9lv_.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/19yc8w76n30ro.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/05jm9t-fm5ei_.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2jl0sg8984bmg.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2q-c5-h7837do.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/2k4fp8uwg758i.js","/creators-assets/_next/static/immutable/chunks/1dzckq15yxafa.js","/creators-assets/_next/static/immutable/chunks/0g9mmnya96tz6.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T71c,

Tiered Pricing

Pricing for products that charge by usage. Up to three plans, each with its own credit slider (2–6 tiers); the price rolls to the new number. Monthly/yearly toggle with discount badge – you enter the exact yearly prices, nothing is calculated.

Included

Per-plan sliders · 4 number animations · info tooltips · highlight + badge on any plan · credits icon (5 built-in or your own image) · number locale, currency prefix, CTA units · colors, radius, font, slider look · responsive, accessible, no external packages.

Setup

Each plan has a Tiers box, one line per tier: credits | monthly | yearly. Features one per line, tooltip via Label | Tooltip. Add your own heading above the component.

Let AI fill it in

Paste into ChatGPT or Claude:

"Give me property values for a Framer pricing component, nothing else. Product: ‹…›. Unit customers pay for: ‹credits/seats/…›. Plans: ‹2 or 3, names›. Highlight: ‹which›. Currency: ‹$›. Yearly discount: ‹…›. Price range: ‹…›. Output per plan: Name; Description (max 90 chars); Highlight Yes/No; Badge; Default tier (1–4); Tiers as 3–4 lines 'credits | monthly | yearly' (whole numbers, no symbols, yearly matching my discount); Features as 5–8 lines, up to 2 with a tooltip as 'Feature | limit'. Also: Credits label, discount badge (max 15 chars), yearly note, CTA text. Realistic rising prices; higher plans start with 'Everything in ‹previous›'."

License

Single-Use Commercial License: one purchase, one project. No resale.

Support hello@joelcimpean.com

5a:[["$","$L5d",null,{"post":{"id":"01a1032f-a895-7628-bb9a-6f65ef6e8436","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"068c9b5d-8e4f-498b-ab2b-a707fae9470c","name":"Joel Cimpean","slug":"joel-cimpean","avatar":"https://framerusercontent.com/avatars/users/068c9b5d-8e4f-498b-ab2b-a707fae9470c/kL4AmpBBI","followed":false,"followsYou":false},"media":[],"resources":[{"id":"3dqMb1sZ6FCljhZXB86U","resolved":true,"title":"Tiered Pricing","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Tiered Pricing","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Pricing for products that charge by usage. Up to three plans, each with its own credit slider (2–6 tiers); the price rolls to the new number. Monthly/yearly toggle with discount badge – you enter the exact yearly prices, nothing is calculated."}]},{"type":"paragraph","content":[{"type":"text","text":"Included","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Per-plan sliders · 4 number animations · info tooltips · highlight + badge on any plan · credits icon (5 built-in or your own image) · number locale, currency prefix, CTA units · colors, radius, font, slider look · responsive, accessible, no external packages."}]},{"type":"paragraph","content":[{"type":"text","text":"Setup","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Each plan has a Tiers box, one line per tier: credits | monthly | yearly. Features one per line, tooltip via Label | Tooltip. Add your own heading above the component."}]},{"type":"paragraph","content":[{"type":"text","text":"Let AI fill it in","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Paste into ChatGPT or Claude: "}]},{"type":"paragraph","content":[{"type":"text","text":"\"Give me property values for a Framer pricing component, nothing else. Product: ‹…›. Unit customers pay for: ‹credits/seats/…›. Plans: ‹2 or 3, names›. Highlight: ‹which›. Currency: ‹$›. Yearly discount: ‹…›. Price range: ‹…›. Output per plan: Name; Description (max 90 chars); Highlight Yes/No; Badge; Default tier (1–4); Tiers as 3–4 lines 'credits | monthly | yearly' (whole numbers, no symbols, yearly matching my discount); Features as 5–8 lines, up to 2 with a tooltip as 'Feature | limit'. Also: Credits label, discount badge (max 15 chars), yearly note, CTA text. Realistic rising prices; higher plans start with 'Everything in ‹previous›'.\""}]},{"type":"paragraph","content":[{"type":"text","text":"License","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Single-Use Commercial License: one purchase, one project. No resale."}]},{"type":"paragraph","content":[{"type":"text","text":"Support","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"hello@joelcimpean.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hello@joelcimpean.com","target":"_blank"}}]}]}]},"introduction":"Pricing cards with credit sliders","slug":"tiered-pricing","author":{"framerUserId":"068c9b5d-8e4f-498b-ab2b-a707fae9470c","name":"Joel Cimpean","slug":"joel-cimpean","avatar":"https://framerusercontent.com/avatars/users/068c9b5d-8e4f-498b-ab2b-a707fae9470c/kL4AmpBBI","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/068c9b5d-8e4f-498b-ab2b-a707fae9470c/01a10322-2bc4-759a-943a-83e2d2960c1d.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-10-03T19:13:36.822Z","updatedAt":"2026-10-03T19:20:00.626Z","publishedAt":"2026-10-03T19:13:36.819Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://enlightened-moment-588431.framer.app/","price":"29","paymentUrl":"https://contra.com/payment-link/bz1rVY19-tiered-pricing-framer-component","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"4XkZ2qlfJYXqg8wREB62","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-03T19:13:37.429Z","updatedAt":"2026-10-03T19:13:37.429Z","reported":false}}],"$L5f"]

Suggested for you