---
title: Customize the pre-built UI
description: Update SuperTokens component styles using CSS for customized UI appearance.
sidebar:
  order: 60
---

## Overview

Updating the CSS allows you to change the UI of the components to meet your needs.
This section guides you through an example of updating the look of buttons.
Note that you can apply the process to update any HTML tag from within SuperTokens components.

## Before you start

This guide is only relevant if you are using the **pre-built UI** components. If you are using your own UI, you can skip this section.

---

## Global style changes

Each stylable component contains the `data-supertokens` attribute (in this example `data-supertokens="link"`). 
For more information on how to find a specific selector look over the [changing style page](/references/frontend-sdks/prebuilt-ui/changing-style).
Let's add a `border` to the `link` elements. The syntax for styling is plain CSS.

<CodeGroup group="frontend-prebuilt-ui">
<Tab title="Reactjs" value="reactjs">
```tsx
import SuperTokens from "supertokens-auth-react";
import EmailVerification from "supertokens-auth-react/recipe/emailverification";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    EmailVerification.init({
      style: `
                [data-supertokens~=link] {
                    border: 2px solid #0076ff;
                    border-radius: 5;
                    width: 30%;
                    margin: 0 auto;
                }
            `,
    }),
    Session.init(),
  ],
});
```
</Tab>
<Tab title="Angular" value="angular">
```tsx check=false reason="script-tag example relies on globals provided by loaded SuperTokens bundles"
// this goes in the auth route config of your frontend app (once the pre-built UI script has been loaded)
supertokensUIInit({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    supertokensUIEmailVerification.init({
      style: `
                [data-supertokens~=link] {
                    border: 2px solid #0076ff;
                    border-radius: 5px;
                    width: 30%;
                    margin: 0 auto;
                }
            `,
    }),
  ],
});
```
</Tab>
</CodeGroup>


### Change fonts

By default, SuperTokens uses the `Arial` font. The best way to override this is to add a `font-family` styling to the `container` component in the recipe configuration.

<CodeGroup group="frontend-prebuilt-ui">
<Tab title="Reactjs" value="reactjs">
```tsx
import SuperTokens from "supertokens-auth-react";
import EmailVerification from "supertokens-auth-react/recipe/emailverification";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    EmailVerification.init({
      style: `
                [data-supertokens~=container] {
                    font-family: cursive
                }
            `,
    }),
    Session.init(),
  ],
});
```
</Tab>
<Tab title="Angular" value="angular">
```tsx check=false reason="script-tag example relies on globals provided by loaded SuperTokens bundles"
// this goes in the auth route config of your frontend app (once the pre-built UI script has been loaded)
supertokensUIInit({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    supertokensUIEmailVerification.init({
      style: `
                [data-supertokens~=container] {
                    font-family: cursive
                }
            `,
    }),
  ],
});
```
</Tab>
</CodeGroup>

### Use media queries

You may want to have different CSS for different `viewports`.
You can achieve this via media queries like this:

<CodeGroup group="frontend-prebuilt-ui">
<Tab title="Reactjs" value="reactjs">
```tsx
import SuperTokens from "supertokens-auth-react";
import EmailVerification from "supertokens-auth-react/recipe/emailverification";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    // ...
    EmailVerification.init({
      // ...
      style: `
                [data-supertokens~=link] {
                    border: 2px solid #0076ff;
                    borderRadius: 5;
                    width: 30%;
                    margin: 0 auto;
                }

                @media (max-width: 440px) {
                    [data-supertokens~=link] {
                        width: 90%;
                    }
                }
            `,
    }),
  ],
});
```
</Tab>
<Tab title="Angular" value="angular">
```tsx check=false reason="script-tag example relies on globals provided by loaded SuperTokens bundles"
// this goes in the auth route config of your frontend app (once the pre-built UI script has been loaded)
supertokensUIInit({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    // ...
    supertokensUIEmailVerification.init({
      // ...
      style: `
                [data-supertokens~=link] {
                    border: 2px solid #0076ff;
                    borderRadius: 5;
                    width: 30%;
                    margin: 0 auto;
                }

                @media (max-width: 440px) {
                    [data-supertokens~=link] {
                        width: 90%;
                    }
                }
            `,
    }),
  ],
});
```
</Tab>
</CodeGroup>

## Customize individual screens

### Send email screen

This screen is where the system redirects the user if you set `mode` to `REQUIRED` and they visit a path that requires a verified email.

<CodeGroup group="frontend-prebuilt-ui">
<Tab title="Reactjs" value="reactjs">
```tsx
import SuperTokens from "supertokens-auth-react";
import EmailVerification from "supertokens-auth-react/recipe/emailverification";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    EmailVerification.init({
      sendVerifyEmailScreen: {
        style: ` ... `,
      },
    }),
    Session.init(),
  ],
});
```
</Tab>
<Tab title="Angular" value="angular">
```tsx check=false reason="script-tag example relies on globals provided by loaded SuperTokens bundles"
// this goes in the auth route config of your frontend app (once the pre-built UI script has been loaded)

supertokensUIInit({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    supertokensUIEmailVerification.init({
      sendVerifyEmailScreen: {
        style: ` ... `,
      },
    }),
  ],
});
```
</Tab>
</CodeGroup>

### Verify link clicked screen

This is the screen shown to users that click the email verification link in the email.

<CodeGroup group="frontend-prebuilt-ui">
<Tab title="Reactjs" value="reactjs">
```tsx
import SuperTokens from "supertokens-auth-react";
import EmailVerification from "supertokens-auth-react/recipe/emailverification";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    EmailVerification.init({
      verifyEmailLinkClickedScreen: {
        style: ` ... `,
      },
    }),
    Session.init(),
  ],
});
```
</Tab>
<Tab title="Angular" value="angular">
```tsx check=false reason="script-tag example relies on globals provided by loaded SuperTokens bundles"
// this goes in the auth route config of your frontend app (once the pre-built UI script has been loaded)

supertokensUIInit({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    supertokensUIEmailVerification.init({
      verifyEmailLinkClickedScreen: {
        style: ` ... `,
      },
    }),
  ],
});
```
</Tab>
</CodeGroup>


---

## See also

<CardGroup cols={3}>
  <Card title="Manual actions" href="/additional-verification/email-verification/manual-actions" />
  <Card title="Protect routes" href="/additional-verification/email-verification/protecting-routes" />
  <Card title="Hooks and overrides" href="/additional-verification/email-verification/hooks-and-overrides" />
  <Card title="Claim validation" href="/additional-verification/session-verification/claim-validation" />
  <Card title="Backend session validation" href="/additional-verification/session-verification/protect-api-routes" />
  <Card title="Configure email behavior" href="/authentication/passwordless/configure-email-and-sms-behavior" />
</CardGroup>