shadcn.io is not affiliated with official shadcn/ui
Currency Switcher Billing Block for Radix UI
Change the currency an account is billed in and see what moves: the next invoice at the local price, open invoices left in dollars, the credit balance converted at a dated rate, and the once-a-year rule.
Installation
Overview
Let a customer change their billing currency knowing what it does, with this currency switcher for React with Radix UI. It is the billing page of Roamfold, a travel planner. A hairline frame with a plus mark on each corner puts a list of three currencies, US dollar, euro and pound sterling, beside the detail for the chosen one. Each row is a native radio with the plan's published local price and a badge on the currency billed now. The detail says three things in words: the next invoice on 12 Nov takes the local price (49.00 to 45.00 in euros), open invoices stay in dollars until they are paid, and the credit balance is converted at a rate dated 18 Oct 2026 (50.00 dollars become 46.00 euros at 0.92). A rule below says a change is allowed once every 12 months and states the last one. The Shine Button reads "Bill me in EUR from 12 Nov" and is the only colored control. It's built from native radios, Badge, Button, Shine Button and Guides, with a CSS entrance only. For SaaS billing settings and any product priced in more than one currency.
FAQ
How do I change the currencies, prices and rates?
Edit CURRENCIES at the top of the file. Each has a code, a name, a symbol, the published price per month and a rate against one dollar. AS_OF is the rate date, NEXT_INVOICE the first invoice a change reaches, and OPEN_INVOICE and CREDIT are what the account holds in dollars. The three effects are derived from those.
Why is the new price not just the converted price?
Many products publish a local price per currency instead of converting on the fly, so 49.00 dollars become 45.00 euros rather than 45.08. The credit balance is different: it is money the customer already holds, so it is converted at the rate on the day of the change.
What does the once-a-year rule do?
After a change is scheduled the other currencies are locked: the button stays quiet, the status line says when the next change is allowed, and the rule shows the date of the last one. Undo the change takes the demo back to the start, which a real app would only allow before the first invoice in the new currency.
What stays local, and how do I wire it up?
Scheduling is a state in the tab, and the status line says "Scheduled in this demo". In your app update the customer's currency with your billing provider, schedule it for the next invoice, and take the rate from the provider rather than from the page; most providers cannot change the currency of a customer that already has open invoices, which is why they stay in dollars.