shadcn.io is not affiliated with official shadcn/ui
Multi Currency Pricing Billing Block for Svelte
A merchant-side rounding rule for converted prices: three plans by four currencies at typed rates, a rule (exact, whole, charm or steps) and a round-up-only switch that rewrite every price, with each move in words.
Installation
Overview
Control how converted prices read, with this multi-currency pricing panel for Svelte with Ark UI. It is the merchant side of billing: it sets what visitors see, not what one customer pays. A hairline frame with a plus mark on each corner starts with four cells of typed rates (euro, pound, yen, rupee against the dollar) and the ending the current rule gives each, then a Segment Group to pick the rounding rule: Exact, Whole, Charm (prices end in .99, or 9 for yen and rupees) or Steps (0.50, or 5). A Switch makes a price round up only, never below the raw conversion. A native table lays out Starter, Pro and Scale against the four currencies, and each cell shows the price a visitor sees, the raw conversion and the move in words (up, down, on the rate). A sentence below counts the moves and names the largest. The Shine Button, the only colored control, publishes the rule, and an outline Revert returns to the live one. It's built from Segment Group, Switch, Button, Shine Button and Guides, with a CSS entrance only. For pricing settings, storefront admin and any product that sells in several currencies.
FAQ
How do I set my plans, currencies and rates?
Edit PLANS (a whole-dollar usd price each), CURRENCIES (a code, a name and a rate, the units of that currency for one dollar) and RATES_ON, the day the rates were taken. The rules and their endings are in stepOf: a step and an offset in hundredths of a unit for each currency, so yen and rupees can use different endings from euros and pounds. Add a currency by adding a row and a branch there.
What does each rule do?
Exact keeps the raw conversion to the cent (to the yen for yen). Whole rounds to the nearest whole unit. Charm moves to the nearest price ending in .99 for euros and pounds, or in 9 for yen and rupees. Steps moves to the nearest 0.50 for euros and pounds, or 5 for yen and rupees. A tie rounds up. Round up only turns every rule into a ceiling: a price is the first allowed price at or above the raw conversion.
What do Up, Down and On the rate mean?
They compare the shown price with the raw conversion at the typed rate, in that currency's units: "Up €0.51" means the shown price is 51 cents above the raw conversion, "Down" is below it, and "On the rate" means no move. The sentence under the table counts them and gives the largest move as a share of the raw price.
What stays local, and how do I wire it for real?
Publish prices only marks the rule as live in the page and says so; no price is published. In your app apply the rule where you build your price list (or in your payment provider's multi-currency prices), keep the rates in your pricing service with a refresh date, and show customers only the rounded price. The rates here are typed samples.
How does it work with a keyboard and a screen reader?
The rule is a named group of four options, the switch has a label, and the table has a caption, column headers and row headers. Prices are plain text, never only color, and moves are words. A polite status line says whether the rule matches the live prices.
How does it look on a phone?
The table would be too wide, so each plan becomes a card with its four currencies folded into one cell, two across, each with the shown price, the raw conversion and the move. The rates, the rule and the foot stay in the same order, and the foot sticks to the bottom of the panel.