shadcn.io is not affiliated with official shadcn/ui
Localization Footer Block for React Aria
A footer for a payroll tool with a country Select and a currency Select beside a price sample that is reformatted as you choose.
Installation
Overview
A footer with region and currency controls for React with React Aria. A divider splits it: at the start, the wordmark, a sentence and three groups of links in a nav labelled Footer; at the end, a "Region and currency" panel with two Selects, a country and a currency, over a framed price sample, "Team plan from $19.00 / month". Choosing a country rewrites the sample in that country's number format (a German price reads 17,48 €) and picks its usual currency, and the currency can then be changed on its own. Prices come from one fixed, indicative rate table in the file and the note under the price says so; a polite live line speaks the new price once per choice. A legal band across the foot closes the block with no rule under it. The rails and top rule come from the Guides spine, and the divider meets the top rule with a + mark.
FAQ
Where do the prices and rates come from?
From the file: PRICE_USD is the plan's price in US dollars and each entry of CURRENCIES has a rate, the number of units per dollar. They are example figures and the note under the price says "Indicative rate" and that you are billed in US dollars. Replace them with a call to your own pricing data, or with a table your server renders, before you ship; a footer should never show a rate that nothing backs.
How is the price formatted?
With Intl.NumberFormat, given the country's locale and the currency's code, so "$19.00", "17,48 €", "¥2,850" and "₹1,577.00" each follow their own rules for symbol, separators and decimals. The price is one left-to-right run, so it reads correctly in a right-to-left layout.
What does choosing a country change?
Two things: the locale the numbers are written in, and the currency Select, which jumps to the country's usual currency. Changing the currency afterwards keeps the country's number format, so a visitor in Germany can look at the price in dollars written the German way.
What does a screen reader hear?
Each Select is named ("Country or region", "Currency"), opens with the arrow keys or Enter and closes with Escape. A live line that is empty from the start says "Team plan from 17,48 € a month." once per choice, so the sample is announced without being read twice.