Localization

Learn to add localization to your Clerk components

Overview

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.

Using Localization

To use localization, you need to use the localization prop as part of your ClerkProvider and pass an object with your changes.

1
import {
2
  ClerkProvider,
3
  SignedIn,
4
  SignedOut,
5
  SignIn,
6
} from '@clerk/clerk-nextjs';
7

8
const localization = {
9
  socialButtonsBlockButton: 'Sign In with {{provider|titleize}}',
10
}
11

12
function MyApp({ Component, pageProps }) {
13
  return (
14
    <ClerkProvider {...pageProps} >
15
    <SignedIn>
16
      <Component {...pageProps} />
17
    </SignedIn
18
    <SignedOut>
19
       <SignIn localization={localization}/>
20
    </SignedOut>
21
    </ClerkProvider>
22
  );
23
}
24

25
export default MyApp;

Predefined localizations

By default, Clerk uses the en-US locale. Install the @clerk/localizations package if you want to use one of the following predefined localizations:

frFR for fr-FR
deDE for de-DE
enUS for en-US (default)

Example: Use the `frFR` localization

// You will need to install @clerk/localizations separately
import { frFR } from '@clerk/localizations';

const App = () => {
  return (
    <ClerkProvider
      localization={frFR}
    >
      {...}
    </ClerkProvider>
  );
}

For a complete list of modifiable properties and the English default strings, please refer to our Github repo.

Datetime localization

All datetime-related localization keys accept a date parameter you can access and use with the usual double-bracket notation ({{ ... }}). To further customize the final string, you can use the pipe operator (|) to apply modifiers.

Currently, Clerk supports the following modifiers.

Name	Type	Description
weekday	string	Returns a string representing the weekday based on the `date` value on the left. This modifier accepts 2 parameters: - The locale to be used, as described in the Intl.DateTimeFormat specification, under the `locales` section. Eg.: `fr-FR` . - The representation format to be used, as described in the Intl.DateTimeFormat specification, under the `weekday` section. Eg.: `long`
timeString	string	Returns a string representing the time based on the `date` value on the left, either in the 12-hour or 24-hour format depending on the locale used. This modifier accepts 1 parameter: - The locale to be used, as described in the Intl.DateTimeFormat specification, under the `locales` section. Eg.: `fr-FR`.
numeric	string	Returns a formatted date string based on the `date` value on the left. The format depends on the locale used. This modifier accepts 1 parameter: - The locale to be used, as described in the Intl.DateTimeFormat specification, under the `locales` section. Eg.: `fr-FR`.
titleize	string	Returns the value on the left after transforming the first character to uppercase. Eg: `monday` will be transformed to `Monday`

For example, to translate the "Last Friday at 13.30" string to French, you would use the following localization string:

1
dates: {
2
  previous6Days: "{{ date | weekday('fr-FR','long') | titleize }} dernier à {{ date | timeString('fr-FR') }}",
3
},

For more datetime examples, please refer to the dates key of our default English translation in our Github repo.