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

terminal
npm install @clerk/localizations

terminal
yarn add @clerk/localizations

terminal
pnpm add @clerk/localizations

_app.tsx
import { ClerkProvider } from "@clerk/nextjs";
import { frFR } from "@clerk/localizations";
import type { AppProps } from "next/app";
 
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <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.