---
title: Disable use of shadow DOM
description: Disable Shadow DOM to customize CSS and improve password manager compatibility.
sidebar:
  icon: layers
  order: 50
---

## Overview

SuperTokens uses [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to prevent CSS clashes between your CSS and the ones provided by SuperTokens.
This guarantees that all the prebuilt UI renders as expected.

However, this has a few problems:
- You cannot override the prebuilt UI CSS directly through your CSS files.
You need to use JavaScript to achieve this.
- Password managers may not work for your end user.

## Before you start

:::warning
This example is relevant only if you use the prebuilt UI components.
:::


## Example

If you want to disable use of shadow dom, you can do this like:

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

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  useShadowDom: false,
  recipeList: [
    /* ... */
  ],
});
```
</Tab>
<Tab title="Angular" value="angular">
```tsx check=false reason="pre-built UI globals are provided by the host framework"
// 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: "...",
  },
  useShadowDom: false,
  recipeList: [
    /* ... */
  ],
});
```
</Tab>
</CodeGroup>

:::warning[If disabled, please be sure to check that the components render correctly - because your CSS might affect the components' UI (the other way around does not happen).]
:::