Localization prop

Clerk offers the ability to override the strings for all of the elements in each of the Clerk Components. This allows you to provide localization for your users or change the wording to suit your brand.

@clerk/localizations

The @clerk/localizations package contains predefined localizations for the Clerk Components. Clerk currently supports:

• ar-SA
• cz-CZ
• da-DK
• de-DE
• el-GR
• en-US (default)
• es-ES
• fr-FR
• he-IL
• it-IT
• ja-JP
• ko-KR
• nb-NO
• nl-NL
• pl-PL
• pt-BR
• ru-RU
• sk-SK
• sv-SE
• tr-TR
• uk-UA
• vi-VN
• zh-CN

Usage

To get started, you need to install the @clerk/localizations package.

terminal
npm install @clerk/localizations

terminal
yarn add @clerk/localizations

terminal
pnpm add @clerk/localizations

Once the @clerk/localizations package is installed, you can import the localizations you need by removing the "-" from the locale. In this example, the fr-FR locale is imported as frFR. The imported localization is then passed to the localization prop on the <ClerkProvider />.

_app.tsx
import { ClerkProvider } from "@clerk/nextjs";
// fr-FR locale is imported as frFR
import { frFR } from "@clerk/localizations";
import type { AppProps } from "next/app";
 
function MyApp({ Component, pageProps }: AppProps) {
  return (
    // Add the localization prop to the ClerkProvider
    <ClerkProvider localization={frFR} {...pageProps}>
      <Component {...pageProps} />
    </ClerkProvider>
  );
}
 
export default MyApp;

Custom localizations

You can also provide your own localizations for the Clerk Components. This is useful if you want to provide localization for a language that Clerk doesn't currently support or if you want to change the wording to suit your brand.

Usage

_app.tsx
import { ClerkProvider } from "@clerk/nextjs";
import type { AppProps } from "next/app";
 
const localization = {
  socialButtonsBlockButton: "Sign In with {{provider|titleize}}",
};
 
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ClerkProvider localization={localization} {...pageProps}>
      <Component {...pageProps} />
    </ClerkProvider>
  );
}
 
export default MyApp;

To see the full list of localizations that you can override, see our GitHub Repository.