shadcn.io is not affiliated with official shadcn/ui
Language and Region Onboarding Block for Vue
A grid of eight languages written in their own names whose pick translates the screen itself and flips it right to left for Arabic, with a region select and a live example of how dates will look.
Installation
Overview
Let people pick their language and see the answer straight away with this language step for Vue with Ark UI. It is a step of Glossmoor, a customer-survey tool, as a whole screen: the page's rails and one band, a step header and a framed panel. Eight languages are cells in one radio group, each in its own name (English, Español, Français, Deutsch, 日本語, Português, العربية, 한국어); choosing one rewrites the step line, the heading, the sentence, the labels and both buttons, and choosing Arabic flips the whole block to read right to left. Under the grid a region select moves to the language's home region, and one line says how dates will look, “Dates look like 14/10/2026”. Continue is the one Shine Button, with a ghost Skip for now beside it. Nothing is stored.
FAQ
How do I add a language or change a string?
Add an entry to LANGUAGES: its id, the name in its own script, the English name, a home region, whether it is right to left, and the screen's eight lines. Every language's text is rendered in the same grid cell with the unchosen ones invisible and hidden from assistive technology, so the heading, sentence and buttons are as tall as the longest translation and nothing moves when you switch.
How does it flip for Arabic?
The section gets dir="rtl" and the catalog direction provider is told the same, so the logical classes, the progress line and any popup follow. Only text that must stay left to right (the date, which is a number in a bdi) opts out. The radio cells keep their order in the grid, because a grid of choices does not need to be reversed to be read right to left.
How is the date line worked out?
With Intl.DateTimeFormat for the selected region and a fixed day, 14 October 2026 in UTC, so everyone sees one date. It runs after the page loads, because Intl output can differ between the server and a browser; until then the line shows a dash. The language sets the region to its usual one, and you can change the region on its own afterwards.
How do the language cells work with the keyboard?
They are native radio buttons in one group named “Language”, so Tab enters the group, the arrow keys move and choose, and the chosen cell has a heavier outline and a check. Each cell's text carries its own lang attribute, so a screen reader pronounces it in that language.
What stays local in the demo, and how do I wire it?
The choice only changes this screen and Continue says it saved in this demo. In your app save the language and the region to the account where submit says so, and load your own translations for the rest of the product; only the strings of this one step are in the file.