Internationalizing a React-Admin Application

This skill describes how to add i18n support to a react-admin / shadcn admin kit application. It covers the full workflow: setting up the i18n provider, structuring translation catalogs, converting hardcoded English strings in JSX to translation keys, and avoiding the many pitfalls that make this task tedious.

High-Level Workflow

When converting an English-only react-admin app to multi-language, follow this order:

1. Install dependencies — ra-i18n-polyglot, ra-language-english, ra-language-<target>, and any auth-provider language packs (e.g. ra-supabase-language-french).
2. Create the i18nProvider — wire up polyglotI18nProvider with merged catalogs and browser locale detection.
3. Create the English CRM message catalog — extract every hardcoded string from JSX into a typed object.
4. Create the target-language catalog — translate every key, using strict typing (satisfies CrmMessages) so missing keys fail at compile time.
5. Convert every component — replace hardcoded strings with <Translate> or useTranslate() calls or rely on react-admin's auto-inference.
6. Disable browser auto-translation — add translate="no" and <meta name="google" content="notranslate" /> to your HTML shell.
7. Add a language switcher — typically on the Profile page, using useLocaleState() and useLocales().
8. Audit and clean up — remove unused keys, inline _ defaults, and duplicate labels.

Namespace Conventions