Getting Started

Localization

Customizing your dApp's language with built-in translations

By default, RainbowKit supports the en-US locale for English language users.

If available, RainbowKit will detect the user's preferred language and choose the appropriate translations. Developers can always override the default language.

To specify a language for your users, just add locale="zh-CN" as a prop in your RainbowKitProvider

import { RainbowKitProvider } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider locale="zh-CN" {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);

RainbowKit's localization support works even better with Sub-path Routing.

Configure your Next.js project like the example below to add an optional /locale/ sub-path to your routes, which will help search engines and users better discover your multi-lingual support.

// next.config.js
{
  i18n: {
    locales: ['default', 'en', 'zh-CN'],
    defaultLocale: 'default',
  },
}

Then pass the locale provided by the Pages Router to the RainbowKitProvider

import { RainbowKitProvider, Locale } from '@rainbow-me/rainbowkit';

export const App = () => {
  const { locale } = useRouter() as { locale: Locale };
  return (
    <RainbowKitProvider locale={locale} {...etc}>
      {/* Your App */}
    </RainbowKitProvider>
  )
};

You can reference an example for the Pages Router here.

App Router does not yet support i18n. Reference our separate example here for implementation best practices with next-intl middleware.

It is recommended that you use the same techniques to translate your dApp's content for full localization support. Localization libraries like i18n-js and next-intl and management tools like Crowdin will simplify this process.

We provide full support for the following locale regions:

If you would like to see support for an additional language, please open a GitHub Discussion and we'll work to support it as soon as possible.