shadcn.io is not affiliated with official shadcn/ui
Message Language Account Block for Ark UI
Choose the language of account emails, security emails and legal documents from six languages, with a drawn email under each select that shows the subject and first line, applies Arabic's right-to-left reading and says when a document falls back to English.
Installation
Overview
Let people choose the language of what you send them, and see it before they save, with this message language panel for React with Ark UI. A hairline frame with a plus mark on each corner holds three bands: Account emails, Security emails and Legal documents. Each band has a Native Select over six languages, English, Español, Deutsch, Français, 日本語 and العربية, and under it a drawn email in the chosen language: the sender, a typed subject line and the first line of the body, with the language's reading direction applied, so Arabic reads from the end. Legal documents are translated into four of the six; for the other two the preview shows the English copy and a line says so, and the select marks those options. The last band counts unsaved changes beside a Shine Button to save them and an outline Button to discard them. It's built from Native Select, Field, Button, Shine Button and Guides, with a CSS entrance only. For the notification or language page of an account in a product that writes to people in more than one language.
FAQ
How do I add my own messages and languages?
Edit the constants at the top. LANGUAGES lists each language by its code, its own name and whether it reads from the end. Each kind of message (ACCOUNT, SECURITY, LEGAL) has a title, a hint and a versions list with one subject and one preview line per language it exists in; a language missing from the list is a language that falls back to English, and the select and the line under the preview both read that from the data. Add a message by adding one more object to MAILS and one more MailBand.
How does the preview show a language that reads from right to left?
The text of the email, and only that, is wrapped in a box that carries the language's lang and a dir of rtl or ltr, so the Arabic subject lines up at the end and the browser picks the right font and quotes. The sender line stays left to right because an address is code. The box is a fixed height whatever the language, so a long German subject or a short Japanese one never moves the select.
What happens when a document has no translation?
The preview shows the English version, and the line under it says "No 日本語 version of legal documents yet, so they are sent in English." The option in the select also says "(English copy)" so the choice is honest before it is made. Nothing is blocked: the visitor can still prefer that language, and the day a version is added to the data the line and the preview follow it.
What stays local, and how do I make it real?
All of it. The subjects and body lines are typed, no email is sent and nothing is translated by a model or a service. Save keeps the three choices in this page and says "Saved 2 changes in this demo. Nothing is stored." To make it real, send the three codes from the save handler to your API, store them on the account, and render each outgoing message with the matching template and the same fallback rule.
Is it accessible, and how does it look on a phone?
Each select has a visible label, each preview is a figure whose caption says which language is sent, and the foot is a polite live region that also reads out what each change did. The preview carries its own lang, so a screen reader switches voice for it. On a phone the three bands stack, the previews sit under their selects at the same height, and the foot with Save stays pinned to the bottom of the screen.