Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.devGet API keys

Localization prop (i18n)

Learn to add internationalization 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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ClerkProvider,
SignedIn,
SignedOut,
SignIn,
} from '@clerk/clerk-react';
const localization = {
socialButtonsBlockButton: 'Sign In with {{provider|titleize}}',
}
function App() {
return (
<ClerkProvider
frontendApi="YOUR_API_KEY"
localization={localization}
>
<SignedIn>
<div>Signed in </div>
</SignedIn>
<SignedOut>
<SignIn/>
</SignedOut>
</ClerkProvider>
);
}
ReactDOM.render(<App />, document.getElementById('root'));

Was this helpful?

Clerk © 2022