shadcn.io is not affiliated with official shadcn/ui
Language and Region Dialog Block for Ark UI
A team intranet's profile page with its language and region dialog shown open: a Language tab with a searchable list of eight languages, a Region tab with country, first day of the week and clock, and a live preview that reformats a sample date, time, number and amount with Intl.
Installation
Overview
Let people say how they want words, dates and numbers written, with this language and region dialog for React with Ark UI. It opens from the Profile page of Globelink, a team intranet: the header holds an outline Button, and the page is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The dialog has two Tabs. Language holds a search Input over eight languages named in their own script, picked with a Radio Group. Region holds a country Select, the first day of the week and a 12 or 24 hour clock as Toggle Groups. Under both, a preview reformats one fixed sample with the browser's own Intl, so "9 Oct 2026" becomes "09.10.2026" as you choose. Save, the only Shine Button, updates the Language, Region and Date format rows of the page behind it. For preview the dialog is drawn open in place when the page loads; the header button opens the real Dialog, with the same state. For intranets, account settings and any app that formats for a locale.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The header's Language and region button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same RegionFields component and share the block's state, so what you set in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
What does the preview format, and is it right for my users?
One fixed moment, Friday 9 October 2026 at 14:30 UTC, and three numbers: a date, a time, 1,234,567.89, an amount of 1,234.50 in the region's currency, 26% and the week's day names in order. All of it comes from Intl.DateTimeFormat and Intl.NumberFormat with the tag your choices make, such as de-DE, so what you see is what the browser would print. Output differs a little between engines and versions, so the preview is worked out after the page mounts and shows dashes until then. A language and region pair the browser has no data for falls back to the language alone.
What stays local, and how do I wire it for real?
Everything. The language, region, first weekday and clock live in the block's state; Save changes the rows on the drawn page and says so in a polite status message, and nothing is stored or sent. In your app save the four values to the user's profile in save, build the locale tag from the first two, and pass the weekday and clock to your date components. No time zone is picked here: keep that in its own control.
How does the language search work?
It filters the eight languages by their native name or their English name as you type, so "deu" and "german" both find Deutsch. When nothing matches, the list area shows a line that names what you typed, and it keeps its height so the dialog never jumps. The chosen language stays chosen while it is filtered out; clearing the field brings it back.
Is it accessible from the keyboard?
Yes. The real dialog is named by its title and described by its sentence, focus is trapped while it is open, and Escape, Cancel and the close button return focus to the header button. The trigger is the button wrapped in DialogTrigger with asChild, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus back on the header button. Tab moves between the two tabs, the search field and the list, and the arrow keys walk the languages and the first-day and clock buttons.
How does it look on a phone?
The copy shown on load docks to the foot of the page as a bottom sheet with Save pinned at the bottom; the tabs, the preview and the fields scroll above it. The preview keeps two columns so it stays short. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.