Skip to main content
The Stytch SDK allows you to customize the text in the prebuilt UI through the strings parameter. This feature supports both one-off customizations for specific text changes and comprehensive localization efforts for supporting multiple languages. Text customization requires version 5.25.0, 19.6.0, and/or 21.6.0 or higher of the @stytch/vanilla-js, @stytch/react, and/or @stytch/nextjs packages, respectively.

​
ICU MessageFormat

All customizable strings use ICU MessageFormat.

​
Available Strings

To see all available strings that can be customized, navigate to the Stytch package in your node_modules and locate the file at: 
node_modules/@stytch/vanilla-js/messages/en.po
node_modules/@stytch/nextjs/messages/en.po
node_modules/@stytch/react/messages/en.po
This file contains all the default English strings used throughout the SDK and their corresponding keys.

​
Basic Usage

Pass your custom strings to the StytchLogin component:

​
TypeScript

Types for the strings prop are available as the Strings types from version v5.43.0, v19.17.0 and/or v21.17.0 of the @stytch/vanilla-js, @stytch/react, and/or @stytch/nextjs packages, respectively. The type is a Partial since we recommend only including strings you intend to override, but you may use Required<Strings> if you are doing a complete localization and intend to translate every string.

​
Localization

For complete localization, you can override all strings, then conditionally display the correct string based on the user’s locale:

​
Dynamic Content Handling

Some strings include dynamic content, such as the Organization name or email address. You can use ICU MessageFormat to format these strings dynamically. 
/**
  Value in the en.po file:
  msgid "emailConfirmation.content"
  msgstr "An email was sent to <bold>{email}</bold>."
*/

const strings = {
  'emailConfirmation.content': 'An email was sent to <bold>{email}</bold>.',
};
Additionally, some strings include special components as part of the string. You can use these components to customize the text inside the component. 
/*
  Value in the en.po file:
  msgid "password.reset.emailSent.resendText"
  msgstr "Didn't get it? <resendButton>Resend email</resendButton>"
*/

const strings = {
  "password.reset.emailSent.resendText":
    "Didn't receive the email? <resendButton>Retry</resendButton>",
};