> ## 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.

# Text Customization

> Customize UI text and labels using the Stytch Vanilla JS SDK

export const isReact_0 = false

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](https://unicode-org.github.io/icu/userguide/format%5Fparse/messages/).

## 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:

```bash theme={null}
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:

{isReact_0 ? (
<CodeBlock language="jsx">{`
const customStrings = {
  'login.title': 'Welcome Back!',
};

function App() {
  return (
    <StytchLogin
      config={{
        products: [Products.emailMagicLinks, Products.passwords],
        emailMagicLinksOptions: {
          loginRedirectURL: 'http://localhost:3000/dashboard',
          loginExpirationMinutes: 60,
        },
      }}
      strings={customStrings}
    />
  );
}`}
</CodeBlock>
) : (
<CodeBlock language="js">{`
const customStrings = {
  'login.title': 'Welcome Back!',
};

document.getElementById('stytch-ui').strings = customStrings;
`}
</CodeBlock>
)}

## 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:

{isReact_0 ? (
<CodeBlock language="jsx">{`
const spanishStrings = {
  'login.title': 'Regístrate o inicia sesión',
  // ... rest of strings
};

function App() {
  return (
    <StytchLogin
      config={{
        products: [Products.emailMagicLinks, Products.passwords],
        emailMagicLinksOptions: {
          loginRedirectURL: 'http://localhost:3000/dashboard',
          loginExpirationMinutes: 60,
        },
      }}
      // If not provided, the default English strings will be used
      strings={locale === 'es' ? spanishStrings : {}}
    />
  );
}
`}</CodeBlock>
) : (
<CodeBlock language="js">{`
const spanishStrings = {
  'login.title': 'Regístrate o inicia sesión',
  // ... rest of strings
};

// If not provided, the default English strings will be used
document.getElementById('stytch-ui').strings = locale === 'es' ? spanishStrings : {};
`}
</CodeBlock>
)}

## 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.

```jsx theme={null}
/**
  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.

```jsx theme={null}
/*
  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>",
};
```