Starter
For freelancers and solo founders.
3 seats · $504 billed yearly
Start free trial- 1 workspace
- Unlimited projects
- Client portal
- Email support
- Custom domain
- SSO and audit log
Pricing Switch · Documentation · Version 1.1.1
Pricing that adds up on its own.
Plans, monthly and yearly billing, currencies by language, seats and VAT, every setting in the panel, and looks to start from.
01
Start here.
Add it to your project. Open the link in your purchase email (or the Marketplace page) and drop Pricing Switch on your pricing page.
Fill in your plans. In Plans, set each plan’s name, description, monthly and yearly price, features and button link. Prices are per month, in your base currency, without VAT.
Set your currencies. The first currency in Currencies is your base. Add the others with their rate and the languages that should see them.
Make it yours. Pick a Layout, then set colours, radius and fonts to match the site. Preview the page and try the toggle, the seats and the currency selector before you publish.
02
How it works.
The visitor picks monthly or yearly billing, the number of seats, a currency and, if you allow it, whether prices include VAT. Every price updates on the spot and rolls to the new amount.
Prices are calculated in the browser from the numbers you enter. No backend, no API keys, no account to connect.
Nothing is stored and nothing is sent anywhere. No analytics.
Each plan’s button is a plain link to the page you choose. It never adds the plan, seats or currency to the link.
The currency follows the site’s language, so a Spanish page shows euros and an English (UK) page shows pounds without any code.
Team
Most popularFor small teams shipping every week.
3 seats · $552 billed yearly
Start free trial- Everything in Starter
- Up to 10 workspaces
- Custom domain
- Roles and permissions
- Priority support
- SSO and audit log
Business
For companies with a security review.
3 seats · $1,332 billed yearly
Talk to sales- Everything in Team
- Unlimited workspaces
- SSO and audit log
- Data hosted in the EU
- Dedicated success manager
Live component. Change billing, currency and seats.
03
Plans
Two to four plans. Each one has:
And Description. The description sits under the name. Leave it empty on every plan to remove that line.
And Highlight label. Marks the plan you want to sell: its card gets the highlight colours and border, a label like Most popular, and the primary button. Highlight one plan, or none.
Price per month when billed monthly.
Price per month when billed yearly. Enter 39, not 468: the component works out the yearly total for the note.
And Seat · yearly. Price of each extra seat per month. Only used when Seats is on.
Seats covered by the plan’s price. Extra seats start after these.
For a Contact us or Enterprise plan. Any text here replaces the price, and the seats and billing notes are hidden for that plan.
One per line. Start a line with - to show it as not included: it appears muted or crossed out, and screen readers hear “Not included” before it.
, Link and New tab. The call to action. Link to your sign-up page, checkout or contact page.
Cards keep the same height and line up row by row: names, descriptions, prices, buttons and feature lists start at the same height across plans.
04
Billing
Sets which period is selected when the page loads. Yearly is the usual choice.
Sits on the Yearly option. On Auto, it works out the biggest yearly saving from your prices (and the current number of seats) and shows it in Badge text, like Save 20%. It rounds down, so it never promises more than the real saving, and it hides itself when yearly saves nothing.
Shows Badge text as you write it, for wording like 2 months free. {percent} still works in it.
Is the small text after the price, like /month or /mo.
And Yearly note sit under the price. {total} in Yearly note becomes the amount billed for the year, like €468 billed yearly.
05
Currencies
Each currency has:
Three letters: EUR, USD, GBP, CHF, JPY…
How many of this currency make one of the base currency. With EUR as base, GBP 0.86 and USD 1.17.
The site languages that get this currency, separated by commas. A language (es, fr, de) or a language and region (en-GB, en-IE).
What converted prices end in.
The base currency is the first one, with rate 1. Plan prices are entered in it.
Which currency a visitor sees. The component reads the page’s language: the Framer Localization locale, or the language declared on the page. An exact match wins (en-GB → GBP), then a bare language (en → USD), then the first currency. Visitors can change it with the Selector.
Rounding.
28.40 · The base currency
28 (28.60 → 29) · Clean converted prices
28.99 · Retail-style prices
28.90 · Softer retail endings
29.00 · Whole prices that never drop below the exact conversion
Every option except Whole number rounds up. A free plan stays free.
Formatting. Prices are written the way the page’s language writes money: 29 € in Spain, €29 in Ireland, 1.140 € in Germany, $1,332 in the US. Decimals sets when cents show: Only when needed, Always, or Never. Currencies without cents, like JPY, never show them.
Rates don’t update by themselves. The component makes no network requests, so rates stay as you set them. Review them every few months, or when you change prices.
06
Seats
Turn on Seats for per-user pricing. Each plan then costs:
Base price + Seat price × (seats − Seats included), never less than the base price.
With Team at €49, 5 seats included and €9 per extra seat: 3 seats cost €49, 8 seats cost €49 + 3 × €9 = €76.
Seats input. Stepper (− and + with a number field) or Slider.
Min seats, Max seats, Step and Start at. The range, the jump per click and the number on load. Typing a number between steps snaps to the nearest step when the field loses focus.
Seats note and One seat note. Shown under each price, like 8 seats or 1 seat.
With Seats off, seat prices are ignored and every card shows its base price.
07
VAT
Turn on VAT to show prices with or without it. Plan prices are always entered without VAT.
21 for Spain, 20 for the UK and France, 19 for Germany.
+ VAT shows the prices you entered. With VAT adds the rate.
Lets visitors include or leave out VAT themselves. Handy when you sell to both businesses and consumers.
And With VAT. The label added to each price note: excl. VAT or incl. VAT.
VAT is added before rounding, so a .99 ending stays .99 with VAT included. One rate applies to every currency. If you sell in several VAT regions, show prices + VAT and let checkout add the local rate.
08
Layouts
One card per plan, side by side, equal height. Narrower than Stack below (760 px by default), they stack in one column by themselves. Set 0 to keep them side by side.
One row per plan: name and description, price, button. No feature lists. For a sidebar, a pricing summary under a feature section, or a second pricing block lower on the page. Narrower than Stack below, each row stacks too.
Controls aligns the toggle, seats, currency and VAT switch to the left or the centre.
Count up rolls each price to its new amount when something changes. Visitors who prefer reduced motion see the new price straight away.
Different settings per breakpoint. Each breakpoint keeps its own settings. A common setup: Cards on Desktop and Tablet, Compact list on Phone.
09
Customize the look.
Colours
Card, Text and Muted text paint every plan. Highlight card, Highlight text, Highlight muted and Highlight border paint the highlighted one. Accent colours the badges, checkmarks, focus ring and VAT switch; On accent is the text on them. Toggle, Toggle thumb, Toggle text and Toggle active paint the billing toggle and the seats stepper buttons. Controls text is the seats number and the currency selector, which sit on the Toggle colour, so a dark thumb never hides them. Primary button and Primary text are the highlighted plan’s button; Secondary button and Secondary text, every other one. Pick your site’s colour styles so the table follows your palette.
When Accent and Highlight card are the same colour (a black highlighted card with a black accent, for example), the badge and checkmarks on that card switch to Highlight text so they stay visible.
Shape
Radius rounds the cards. Button radius rounds the buttons: 40 makes a pill. Toggle radius rounds the toggle, stepper and selector: 999 makes a pill, 8 a soft rectangle. Gap sets the space between cards. Card padding sets the space inside them. Border draws a thin line around every card. Highlight width thickens the highlighted card’s border. Shadow lifts the cards off the page. Not included style shows missing features muted or crossed out.
Type
Plan name font, Price font, Body font and Button font. Choose your site’s fonts and sizes in each one. Body font also styles the toggle, notes and features.
Recipes
Cards · Border on · Highlight border = your accent · Highlight width 2 · Shadow off · Radius 16
Highlight card #111111 · Highlight text #FFFFFF · Highlight muted #A3A3A3 · Primary button #FFFFFF · Primary text #111111 · Accent #111111
Border off · Shadow on · Card #FAFAFA · Radius 24 · Gap 24 · Toggle radius 999 · Button radius 40
Compact list · Controls Left · Seats off · Price font 28 px · Card padding 20
VAT on · 21 % · Show prices + VAT · VAT switch on · Decimals Always · Not included style Crossed out
10
Settings reference.
In the order they appear in the property panel.
Plans
Name, Description, Highlight, Highlight label.
Monthly, Yearly — price per month, base currency, without VAT.
Seat · monthly, Seat · yearly, Seats included — used when Seats is on.
Custom price — replaces the price with text.
Features — one per line, - for not included.
Button, Link, New tab.
Billing
Billing — Monthly or Yearly on load.
Monthly label, Yearly label.
Toggle name — the toggle’s name for screen readers: Billing period.
Badge — Auto, Custom or None. Badge text — Save {percent}%.
Per month, Monthly note, Yearly note ({total}).
Currency
Code, Rate, Locales, Rounding. The first one is the base.
Lets visitors change currency. Selector name — its name for screen readers.
Only when needed, Always or Never.
Seats
Seats — on or off.
Seats input — Stepper or Slider.
Min seats, Max seats, Step, Start at.
Seats label, Seats note ({seats}), One seat note.
Minus name, Plus name — the stepper buttons’ names for screen readers.
VAT
VAT — on or off. VAT rate.
Show prices — + VAT or With VAT.
VAT switch, Switch label.
Without VAT, With VAT — labels in the price note.
Not included label — read before a missing feature.
Layout
Cards or Compact list.
The width under which plans stack. 0 keeps them side by side.
Left or Center.
On or off.
Style
Card, Highlight card, Highlight border, Text, Muted text, Highlight text, Highlight muted, Accent, On accent, Lines.
Toggle, Toggle thumb, Toggle text, Toggle active, Controls text.
Primary button, Primary text, Secondary button, Secondary text.
Radius, Button radius, Toggle radius, Gap, Card padding, Border, Highlight width, Shadow, Not included style.
Plan name font, Price font, Body font, Button font.
11
Languages
Every text is a property, so Framer Localization translates it like any other text: plan names, features, buttons, notes, badge and labels.
Placeholders in braces stay as they are in every language: {percent}, {total}, {seats}.
Money is written the way the page’s language writes it, and the currency follows the language through Locales.
Codes, rates and locales are never translated.
12
Accessibility
The billing toggle is a real radio group: Tab reaches it, the arrow keys switch period, and screen readers hear its name and the selected option.
When a visitor changes billing, seats, currency or VAT, the new prices are announced once, politely, without moving focus.
Each price is read as the final amount, never the rolling numbers.
The seats stepper works with the arrow keys and announces its value. Its buttons have names (Fewer seats, More seats).
Missing features are announced as not included, not only shown in grey.
The VAT control is a switch that announces on and off.
Count up turns off for visitors who prefer reduced motion.
13
Troubleshooting
Check the page’s language and the Locales list. en-GB matches exactly; en matches any English page without a closer match. Put the most specific codes in.
On Auto it hides when yearly saves nothing. Check each plan’s Yearly price is lower than Monthly, or switch Badge to Custom.
It shows the biggest saving rounded down. 39 instead of 49 is 20.4 %, so it says 20 %.
Custom price has text in it. Clear it to show the number.
Its seat prices are 0, or the number of seats is still within Seats included.
Set Rounding to Whole number or Ends in .99 for that currency.
Decimals is on Only when needed. Choose Always or Never.
Raise Stack below.
Its Link is empty.
14
Updates
New versions are free and listed here. To update, insert the component again from the Marketplace page or from the link in your Polar order, which always points to the latest version, and copy your settings across.
— A plan button without a link is shown as plain text with the same look, not as an empty link, so keyboards and screen readers don’t stop on it.
— New Controls text colour for the seats number and the currency selector: they stay readable with a dark toggle thumb.
— First release: monthly and yearly billing with an automatic savings badge, currencies by site language with rounding, seats, VAT, Cards and Compact list layouts, count-up prices, and full documentation.
15
Support and licence.
Questions or a bug? Write to info@miguelrecio.es. A person replies within two business days (Mon–Fri, CET).
One licence covers one designer and unlimited client projects. Reselling or redistributing the component isn’t allowed.
Subscriptions and payments are handled by your own checkout. Pricing Switch only shows prices and links to it.