Localization
Explicit English, Chinese, Korean and Japanese catalogs with fallback and review.
Requested catalogs
English, Traditional Chinese (zh-Hant), Simplified Chinese (zh-Hans), Korean (ko) and Japanese (ja) have optional versioned catalog entries. Import only the catalogs the application needs. The four translations remain draft working material without qualified human linguistic signoff. The project records that unavailable review as non-blocking; see verification for the policy and retained automated checks.
import type { ReactNode } from 'react';
import { FayeUIProvider } from '@fayegram-ai/faye-ui/provider/provider';
import { traditionalChineseCatalog } from '@fayegram-ai/faye-ui/provider/locale-zh-hant';
export function TraditionalChineseApplication({ children }: { children: ReactNode }) {
return <FayeUIProvider locale="zh-TW" catalogs={[traditionalChineseCatalog]}>
{children}
</FayeUIProvider>;
}Fallback and ownership
Canonical BCP 47 tags use language/script/region fallback. Likely scripts allow zh-TW to select zh-Hant and zh-CN to select zh-Hans. Missing keys fall back to English. Placeholder names and schema versions must match the source catalog. Updates use explicit catalog revisions; duplicate catalogs are rejected.
Catalogs supply library-owned interactive labels for modals, notifications, command palettes, chips, ratings, pagination, table pagination and transfer lists. Explicit props/configured settings retain precedence. Server-safe compositions accept their labels explicitly. Direction remains an explicit provider choice; these requested locales use left-to-right layout.
Application titles, descriptions, item labels, plural-sensitive business text and date/number formatting remain application content. Catalog labels are plain text and React escapes substituted values. No HTML, callbacks, remote fetching or automatic imports enter the catalog contract.
Review
Use the real example to change catalogs while a dialog or pagination is active. Check announcements, language accuracy, font fallback, long labels and IME input on actual devices. The expansion pseudo locale is a test fixture, not a shipped translation or a review signoff.
Live examples
Try the controls below, then read or copy the complete example to adapt it for your application.
Read the complete example
'use client';
import { NativeSelect } from '@fayegram-ai/faye-ui/controls/native-select';
import { useState } from 'react';
import { FayeUIProvider } from '@fayegram-ai/faye-ui/provider/provider';
import { englishCatalog } from '@fayegram-ai/faye-ui/provider/locale-en';
import { traditionalChineseCatalog } from '@fayegram-ai/faye-ui/provider/locale-zh-hant';
import { simplifiedChineseCatalog } from '@fayegram-ai/faye-ui/provider/locale-zh-hans';
import { koreanCatalog } from '@fayegram-ai/faye-ui/provider/locale-ko';
import { japaneseCatalog } from '@fayegram-ai/faye-ui/provider/locale-ja';
import { Modal } from '@fayegram-ai/faye-ui/overlays/modal';
import { Chip } from '@fayegram-ai/faye-ui/controls/chip';
import { Pagination } from '@fayegram-ai/faye-ui/navigation/pagination';
import { Button } from '@fayegram-ai/faye-ui/controls/button';
const catalogs = [englishCatalog, traditionalChineseCatalog, simplifiedChineseCatalog, koreanCatalog, japaneseCatalog];
export default function Localization() {
const [locale, setLocale] = useState('en'), [open, setOpen] = useState(false), [page, setPage] = useState(1), [removed, setRemoved] = useState(false);
return <section aria-label="Locale catalog example">
<label>Catalog<NativeSelect aria-label="Example locale" value={locale} onChange={e => setLocale(e.target.value)}><option value="en">English</option><option value="zh-Hant">繁體中文</option><option value="zh-Hans">简体中文</option><option value="ko">한국어</option><option value="ja">日本語</option></NativeSelect></label>
<FayeUIProvider locale={locale} catalogs={catalogs} applyToDocument={false} direction="ltr">
<Button onClick={() => setOpen(true)}>Open localized dialog</Button>
<Modal open={open} onOpenChange={setOpen} title="Application-provided title">The close label comes from the selected catalog. Application content is supplied separately.</Modal>
{!removed && <Chip onRemove={() => setRemoved(true)}>Application-provided item</Chip>}
<Pagination page={page} count={5} onPageChange={setPage}/>
<output>Page {page}{removed ? ' · Item removed' : ''}</output>
</FayeUIProvider>
</section>;
}