Internationalization

Some UnflowUI components render user-facing strings — for example, the Button's loading label. These strings are internationalised out of the box using i18next.

Supported locales

Setup

Register UnflowUI's translation resources with your i18next instance. Do this once, before rendering any components:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { addUnflowResources } from '@unflow/ui/i18n';

i18n.use(initReactI18next).init({ lng: 'en', resources: {} });

addUnflowResources(i18n);

If you're using react-i18next with a Provider, call addUnflowResources after the instance is initialised.

Using your own i18next instance

If your app already has an i18next instance, pass it directly:

import { addUnflowResources } from '@unflow/ui/i18n';
import myI18n from './i18n'; // your app's configured i18n instance

addUnflowResources(myI18n);

Namespace

UnflowUI uses the namespace unflow-ui. Translations are scoped under this namespace and will not collide with your app's own translation keys.

import { UNFLOW_I18N_NS } from '@unflow/ui/i18n';
// UNFLOW_I18N_NS === 'unflow-ui'

Overriding strings without i18n

If you don't want to use i18next, you can override any component string directly via slotProps. For example, to customise the Button loading label:

<Button
  label="Save"
  loading
  slotProps={{
    loading: {
      label: { content: 'Saving…' },
    },
  }}
/>

This bypasses i18n entirely and renders the provided string directly.

TypeScript support

Translation keys are typed via TranslationKeys:

import type { TranslationKeys } from '@unflow/ui/i18n';