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

# Customize Stytch UI

> How to customize Stytch UI to fit the look and feel of your app

Many elements of Stytch UI can be customized. You can use our pre-built, bring your own shadcn/ui themes, or write your own theme. You can also replace any string appearing in Stytch UI. Select your package to see all customization options.

<Columns cols={3}>
  <Card title="@stytch/vanilla-js" icon="ice-cream-cone" href="/api-reference/consumer/frontend-sdks/vanilla-js/prebuilt-ui/theming" />

  <Card title="@stytch/nextjs" icon="triangle" href="/api-reference/consumer/frontend-sdks/nextjs/prebuilt-ui/theming" />

  <Card title="@stytch/react" icon="atom" href="/api-reference/consumer/frontend-sdks/react/prebuilt-ui/theming" />
</Columns>

Here are some examples of customized Stytch UI components:

<Tabs>
  <Tab title="Default">
    <img src="https://mintcdn.com/stytch-34ca0595/j0ZekfcvTA5toQr8/images/api-reference/shared/sdk/stytch-ui-light.png?fit=max&auto=format&n=j0ZekfcvTA5toQr8&q=85&s=3fd77cd65972557b104a1620e189ab7f" alt="" style={{ maxWidth: "500px" }} width="880" height="738" data-path="images/api-reference/shared/sdk/stytch-ui-light.png" />
  </Tab>

  <Tab title="Dark">
    <img src="https://mintcdn.com/stytch-34ca0595/j0ZekfcvTA5toQr8/images/api-reference/shared/sdk/stytch-ui-dark.png?fit=max&auto=format&n=j0ZekfcvTA5toQr8&q=85&s=c4d3f4109be48605d1d2e82d44677c6d" alt="" style={{ maxWidth: "500px" }} width="880" height="738" data-path="images/api-reference/shared/sdk/stytch-ui-dark.png" />
  </Tab>

  <Tab title="shadcn - default">
    <img src="https://mintcdn.com/stytch-34ca0595/j0ZekfcvTA5toQr8/images/api-reference/shared/sdk/stytch-ui-shadcn.png?fit=max&auto=format&n=j0ZekfcvTA5toQr8&q=85&s=6a6af4f3af96bd541321e1c0e5082385" alt="" style={{ maxWidth: "500px" }} width="880" height="738" data-path="images/api-reference/shared/sdk/stytch-ui-shadcn.png" />
  </Tab>

  <Tab title="shadcn - Neobrutalism">
    <img src="https://mintcdn.com/stytch-34ca0595/j0ZekfcvTA5toQr8/images/api-reference/shared/sdk/stytch-ui-shadcn-neobrutalism.png?fit=max&auto=format&n=j0ZekfcvTA5toQr8&q=85&s=e783ee450a8756f3b1fb61b24fe72ed3" alt="" style={{ maxWidth: "500px" }} width="880" height="738" data-path="images/api-reference/shared/sdk/stytch-ui-shadcn-neobrutalism.png" />

    [From tweakcn](https://tweakcn.com/editor/theme?theme=neo-brutalism)
  </Tab>

  <Tab title="shadcn - Bubblegum">
    <img src="https://mintcdn.com/stytch-34ca0595/j0ZekfcvTA5toQr8/images/api-reference/shared/sdk/stytch-ui-shadcn-bubblegum.png?fit=max&auto=format&n=j0ZekfcvTA5toQr8&q=85&s=72bc5abc759db017c276f8761f80505a" alt="" style={{ maxWidth: "500px" }} width="880" height="738" data-path="images/api-reference/shared/sdk/stytch-ui-shadcn-bubblegum.png" />

    [From tweakcn](https://tweakcn.com/editor/theme?theme=bubblegum)
  </Tab>

  <Tab title="shadcn - Amethyst dark">
    <img src="https://mintcdn.com/stytch-34ca0595/j0ZekfcvTA5toQr8/images/api-reference/shared/sdk/stytch-ui-shadcn-amethyst-dark.png?fit=max&auto=format&n=j0ZekfcvTA5toQr8&q=85&s=0a89a21ce9ba4b38522149d9faa09759" alt="" style={{ maxWidth: "500px" }} width="880" height="738" data-path="images/api-reference/shared/sdk/stytch-ui-shadcn-amethyst-dark.png" />

    [From tweakcn](https://tweakcn.com/editor/theme?theme=amethyst-haze)
  </Tab>
</Tabs>