Language Switcher Blueprint
Static open language picker panel with 10 locales in their native scripts, the current selection checked, and partial coverage notes on two languages.
Static open language picker panel with 10 locales in their native scripts, the current selection checked, and partial coverage notes on two languages.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Language Switcher Blueprint is the static open state of the locale picker panel, rendered inline so it is visible in any preview. Ten languages are listed in their own scripts, English through Nederlands, with English checked and a subtle bg-muted/40 highlight on that row. Japanese and Chinese (Simplified) carry a coverage note, 78% translated and 62% translated respectively, surfaced as subdued subtext beneath the native name. A search field sits at the top of the panel and a footer line explains the fallback: partially translated languages fall back to English for missing strings.
The languages array drives every row with a coverage field on all items, null for complete locales and a string for partial ones. Rendering the open state as static markup means the picker is always visible in the preview without a Radix portal escaping the root.
Reach for this block anywhere the user selects their interface language, wired to a locale context or cookie write. Filter the list client-side against the search input once you attach state.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the user-facing language preference picker. Other language switcher contexts:
Tip: the coverage note on partial locales sets the right expectation before the user switches, not after.