Tiered Pricing

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