Skip to main content

Documentation Index

Fetch the complete documentation index at: https://stytch.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

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>",
};