shadcn.io is not affiliated with official shadcn/ui
Currency Selector Storefront Block for Ark UI
A currency toggle (USD, EUR, GBP, JPY) that re-prices four drawn stationery products from typed fictional rates; each price opens a hover card with the sum written out and its rounding rule.
Installation
Overview
Show a price in the shopper's currency and show how it was worked out, with this selector for React with Ark UI. A header says what Inkwell & Ivy, a stationery shop, offers. The first band is a Toggle Group of four currencies and the date of the rates; under it four drawn products are re-priced in hairline cells. Each price is a button that opens a Hover Card, and also opens on keyboard focus, with the sum written out: "$48.00 × 0.92 = €44.16, shown as €44.20 (rounded to 10c)". The rates are typed and fictional, and a line says the shop charges in USD. It's built from Toggle Group, Hover Card and Guides. For an international storefront.
FAQ
Where do the rates come from?
They are typed in CURRENCIES, fictional and dated 9 Oct 2026; nothing is live. Each rate is a fraction of minor units (92 over 100 for euros) so the sum is whole-number arithmetic. In a real shop, load the day's rates from your payment provider, keep the date on screen and use the rate your provider will settle at.
Why is the shown price different from the sum?
Each currency has a rounding rule in step: euros to 10c, pounds to 5p, yen to ¥10 and dollars to the cent. The card shows the exact result, then the price shown after rounding, so the shopper can see the difference. When the two agree, it says so.
Which currency is the shopper charged in?
USD, and the status line says so. Showing another currency is a guide; the amount on the card statement is your provider's conversion. If you charge in the displayed currency, change the line and price in that currency.
How do I reach the hover card without a mouse?
Tab to a price: the card opens on focus and closes on Escape or when focus leaves. On a touch screen a press opens it.