Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.dev

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

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.

NameTypeDescription
weekdaystring

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

timeStringstring

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.

numericstring

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.

titleizestring

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

Was this helpful?

Clerk © 2022