> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-actions-triggers-prototype.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize Style and Themes with Auth0 Universal Components

> Customize the Auth0 Universal Components design system using Tailwind CSS, CSS variables, and built-in theme presets.

<Warning>
  Auth0 Universal Components is currently in Early Access. By using it, you
  agree to the applicable Free Trial terms in [Okta's Master Subscription
  Agreement](https://www.okta.com/agreements/). To learn more, read [Product
  Release Stages](/docs/troubleshoot/product-lifecycle/product-release-stages).
</Warning>

Auth0 Universal Components are built on a flexible design system utilizes [Tailwind CSS](https://tailwindcss.com/docs/installation/using-vite) and [Radix UI primitives](https://www.radix-ui.com/primitives/docs/overview/introduction). Styling is orchestrated through the [`Auth0ComponentProvider`](/docs/get-started/universal-components/auth0-component-provider) to allow you to choose between high-level presets or fine-grained CSS variable overrides.

This architecture ensures that your identity flows look and feel like native parts of your application.

<Tabs>
  <Tab title="React">
    ## Get started

    1. Import the stylesheet.

    ```tsx theme={null}
    import "@auth0/universal-components-react/styles";
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Tailwind v4 users:** Add `@import "@auth0/universal-components-react/tailwind"` to your CSS file.
    </Callout>

    2. Add your brand color.

    ```css theme={null}
    :root {
      --primary: #4f46e5; /* your brand color */
      --primary-foreground: #ffffff; /* text on buttons */
    }
    ```

    Done. All buttons, links, and active states now use your brand.

    ***

    ## Theme presets

    Pass `themeSettings` to `Auth0ComponentProvider` to switch between built-in themes.

    ```tsx App.tsx theme={null}
    <Auth0ComponentProvider
      themeSettings={{
        mode: "light", // 'light' | 'dark'
        theme: "default", // 'default' | 'minimal' | 'rounded'
      }}
    >
      <App />
    </Auth0ComponentProvider>
    ```

    <table class="table">
      <thead>
        <tr>
          <th>Preset</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>default</code>
          </td>

          <td>Standard Auth0 look with balanced shadows and borders</td>
        </tr>

        <tr>
          <td>
            <code>minimal</code>
          </td>

          <td>Reduced visual weight with fewer shadows and lighter borders</td>
        </tr>

        <tr>
          <td>
            <code>rounded</code>
          </td>

          <td>Increased border radii for a softer appearance</td>
        </tr>
      </tbody>
    </table>

    ***

    ## Review CSS variables

    All visual properties are driven by CSS custom properties. Override them in your stylesheet or via the `themeSettings.variables` prop.

    <Tabs>
      <Tab title="Colors (Light)">
        ```css theme={null}
        :root {
          /* Brand - the most impactful variables */
          --primary: oklch(37% 0 0);              /* buttons, links, active states */
          --primary-foreground: oklch(100% 0 0);  /* text on primary surfaces */

        /_ Surfaces _/
        --background: oklch(100% 0 0); /_ page background _/
        --foreground: oklch(9% 0 0); /_ default text _/
        --card: oklch(100% 0 0); /_ card background _/
        --card-foreground: oklch(0% 0 0); /_ text inside cards _/
        --popover: oklch(100% 0 0); /_ dropdown/dialog background _/
        --popover-foreground: oklch(9% 0 0); /_ text inside popovers _/
        --input: oklch(100% 0 0); /_ input field background _/

        /_ Secondary & muted _/
        --secondary: oklch(96% 0 0);
        --secondary-foreground: oklch(100% 0 0);
        --muted: oklch(96% 0 0); /_ disabled backgrounds _/
        --muted-foreground: oklch(45% 0 0); /_ placeholder text _/

        /_ Accent & destructive _/
        --accent: oklch(97% 0 0); /_ hover highlights _/
        --accent-foreground: oklch(9% 0 0);
        --destructive: oklch(93% 0.03 17); /_ error states _/
        --destructive-foreground: oklch(36% 0.14 17);

        /_ Borders _/
        --border: oklch(89% 0 0);
        --ring: oklch(89% 0 0); /_ focus ring _/
        }

        ```
      </Tab>

      <Tab title="Colors (Dark)">
        ```css theme={null}
        .dark {
          /* Brand */
          --primary: oklch(70% 0.15 250);         /* brighter for dark backgrounds */
          --primary-foreground: oklch(10% 0 0);

          /* Surfaces */
          --background: oklch(12% 0 0);
          --foreground: oklch(95% 0 0);
          --card: oklch(15% 0 0);
          --card-foreground: oklch(95% 0 0);
          --popover: oklch(15% 0 0);
          --popover-foreground: oklch(95% 0 0);
          --input: oklch(18% 0 0);

          /* Secondary & muted */
          --secondary: oklch(20% 0 0);
          --secondary-foreground: oklch(95% 0 0);
          --muted: oklch(20% 0 0);
          --muted-foreground: oklch(60% 0 0);

          /* Accent & destructive */
          --accent: oklch(25% 0 0);
          --accent-foreground: oklch(95% 0 0);
          --destructive: oklch(30% 0.15 17);
          --destructive-foreground: oklch(95% 0.05 17);

          /* Borders */
          --border: oklch(25% 0 0);
          --ring: oklch(35% 0 0);
        }
        ```
      </Tab>

      <Tab title="Border Radius">
        ```css theme={null}
        :root {
          /* Common - adjust these for overall feel */
          --radius-sm:  4px;    /* tags, chips */
          --radius-md:  6px;    /* small elements */
          --radius-lg:  10px;   /* buttons, inputs */
          --radius-xl:  12px;   /* cards */
          --radius-2xl: 16px;   /* modals, large panels */

        /_ Fine-grained (rarely needed) _/
        --radius-xs: 2px;
        --radius-3xl: 20px;
        --radius-4xl: 24px;
        --radius-5xl: 32px;
        }

        ```
      </Tab>

      <Tab title="Typography">
        ```css theme={null}
        :root {
          --font-size-page-header:      2.25rem;   /* 36px - main title */
          --font-size-heading:          1.5rem;    /* 24px - section headings */
          --font-size-title:            1.25rem;   /* 20px - card titles */
          --font-size-subtitle:         1.125rem;  /* 18px - secondary headings */
          --font-size-body:             1rem;      /* 16px - body text */
          --font-size-paragraph:        0.875rem;  /* 14px - descriptions */
          --font-size-label:            0.875rem;  /* 14px - form labels */
          --font-size-page-description: 0.875rem;  /* 14px - subtitles */
        }
        ```
      </Tab>
    </Tabs>

    ***

    ## Style components

    Every component accepts a `styling` prop for targeted overrides without affecting global styles.

    ```tsx theme={null}
    <SsoProviderTable
      styling={{
        variables: {
          common: {
            "--primary": "#059669", // override just for this component
          },
          light: { "--card": "#f8fafc" },
          dark: { "--card": "#1e293b" },
        },
        classes: {
          "SsoProviderTable-header": "shadow-lg",
          "SsoProviderTable-table": "rounded-xl",
        },
      }}
    />
    ```

    **When to use:**

    * `variables` - CSS custom property overrides scoped to the component
    * `classes` - Tailwind or custom classes applied to specific component parts

    <Accordion title="Available class targets by component">
      Each component exposes class targets for its major sections:

      **SsoProviderCreate**

      * `SsoProviderCreate-header`, `SsoProviderCreate-wizard`
      * `ProviderSelect-root`, `ProviderDetails-root`, `ProviderConfigure-root`

      **SsoProviderTable**

      * `SsoProviderTable-header`, `SsoProviderTable-table`, `SsoProviderTable-row`

      **SsoProviderEdit**

      * `SsoProviderEdit-header`, `SsoProviderEdit-tabs`
      * `SsoProviderEdit-ssoTab`, `SsoProviderEdit-provisioningTab`, `SsoProviderEdit-domainsTab`

      **DomainTable**

      * `DomainTable-header`, `DomainTable-table`
      * `DomainTable-createModal`, `DomainTable-configureModal`, `DomainTable-deleteModal`

      **OrganizationDetailsEdit**

      * `OrganizationDetailsEdit-header`, `OrganizationDetailsEdit-form`, `OrganizationDetailsEdit-actions`
    </Accordion>

    ***

    ## Common customizations

    ### Brand colors (Hex)

    Convert your brand hex color to the format used in CSS:

    ```css theme={null}
    :root {
      /* Using hex directly */
      --primary: #4f46e5;
      --primary-foreground: #ffffff;

      /* Or oklch for better color manipulation */
      --primary: oklch(50% 0.2 265); /* purple */
    }
    ```

    ### Soft corners

    For a more rounded aesthetic across all components:

    ```css theme={null}
    :root {
      --radius-lg: 16px; /* buttons, inputs */
      --radius-xl: 20px; /* cards */
      --radius-2xl: 24px; /* modals */
    }
    ```

    ### Compact typography

    For denser UIs:

    ```css theme={null}
    :root {
      --font-size-page-header: 1.75rem;
      --font-size-heading: 1.25rem;
      --font-size-title: 1rem;
      --font-size-body: 0.875rem;
    }
    ```

    ***

    ## Dark mode

    The components automatically respond to the `mode` setting in `themeSettings`. To sync with your app's dark mode:

    ```tsx theme={null}
    function App() {
      const [isDark, setIsDark] = useState(false);

      return (
        <Auth0ComponentProvider
          themeSettings={{
            mode: isDark ? "dark" : "light",
          }}
        >
          <YourApp />
        </Auth0ComponentProvider>
      );
    }
    ```

    Or use system preference:

    ```tsx theme={null}
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    <Auth0ComponentProvider
      themeSettings={{ mode: prefersDark ? 'dark' : 'light' }}
    >
    ```
  </Tab>

  <Tab title="Next.js">
    ## Get started

    1. Import the stylesheet.

    In your root layout file:

    ```tsx layout.tsx theme={null}
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";
    import "@auth0/universal-components-react/styles";

    export default function RootLayout({ children }) {
      return (
        <html lang="en">
          <body>
            <Auth0ComponentProvider
              mode="proxy"
              domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN}
              proxyConfig={{ baseUrl: "/api/auth" }}
            >
              {children}
            </Auth0ComponentProvider>
          </body>
        </html>
      );
    }
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Tailwind v4 users:** Add `@import "@auth0/universal-components-react/tailwind"` to your CSS file.

      **Shadcn users:** No import needed - styles are already in your Tailwind build.
    </Callout>

    2. Add your brand color.

    ```css theme={null}
    :root {
      --primary: #4f46e5; /* your brand color */
      --primary-foreground: #ffffff; /* text on buttons */
    }
    ```

    Done. All buttons, links, and active states now use your brand.

    ***

    ## Theme presets

    Pass `themeSettings` to `Auth0ComponentProvider` to switch between built-in themes.

    ```tsx layout.tsx theme={null}
    <Auth0ComponentProvider
      mode="proxy"
      domain="your-tenant.auth0.com"
      proxyConfig={{ baseUrl: "/api/auth" }}
      themeSettings={{
        mode: "light", // 'light' | 'dark'
        theme: "default", // 'default' | 'minimal' | 'rounded'
      }}
    >
      {/* Your app components */}
    </Auth0ComponentProvider>
    ```

    <table class="table">
      <thead>
        <tr>
          <th>Preset</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>default</code>
          </td>

          <td>Standard Auth0 look with balanced shadows and borders</td>
        </tr>

        <tr>
          <td>
            <code>minimal</code>
          </td>

          <td>Reduced visual weight with fewer shadows and lighter borders</td>
        </tr>

        <tr>
          <td>
            <code>rounded</code>
          </td>

          <td>Increased border radii for a softer appearance</td>
        </tr>
      </tbody>
    </table>

    ***

    ## Review CSS variables

    All visual properties are driven by CSS custom properties. Override them in your stylesheet or via the `themeSettings.variables` prop.

    <Tabs>
      <Tab title="Colors (Light)">
        ```css theme={null}
        :root {
          /* Brand - the most impactful variables */
          --primary: oklch(37% 0 0);              /* buttons, links, active states */
          --primary-foreground: oklch(100% 0 0);  /* text on primary surfaces */

        /_ Surfaces _/
        --background: oklch(100% 0 0); /_ page background _/
        --foreground: oklch(9% 0 0); /_ default text _/
        --card: oklch(100% 0 0); /_ card background _/
        --card-foreground: oklch(0% 0 0); /_ text inside cards _/
        --popover: oklch(100% 0 0); /_ dropdown/dialog background _/
        --popover-foreground: oklch(9% 0 0); /_ text inside popovers _/
        --input: oklch(100% 0 0); /_ input field background _/

        /_ Secondary & muted _/
        --secondary: oklch(96% 0 0);
        --secondary-foreground: oklch(100% 0 0);
        --muted: oklch(96% 0 0); /_ disabled backgrounds _/
        --muted-foreground: oklch(45% 0 0); /_ placeholder text _/

        /_ Accent & destructive _/
        --accent: oklch(97% 0 0); /_ hover highlights _/
        --accent-foreground: oklch(9% 0 0);
        --destructive: oklch(93% 0.03 17); /_ error states _/
        --destructive-foreground: oklch(36% 0.14 17);

        /_ Borders _/
        --border: oklch(89% 0 0);
        --ring: oklch(89% 0 0); /_ focus ring _/
        }

        ```
      </Tab>

      <Tab title="Colors (Dark)">
        ```css theme={null}
        .dark {
          /* Brand */
          --primary: oklch(70% 0.15 250);         /* brighter for dark backgrounds */
          --primary-foreground: oklch(10% 0 0);

          /* Surfaces */
          --background: oklch(12% 0 0);
          --foreground: oklch(95% 0 0);
          --card: oklch(15% 0 0);
          --card-foreground: oklch(95% 0 0);
          --popover: oklch(15% 0 0);
          --popover-foreground: oklch(95% 0 0);
          --input: oklch(18% 0 0);

          /* Secondary & muted */
          --secondary: oklch(20% 0 0);
          --secondary-foreground: oklch(95% 0 0);
          --muted: oklch(20% 0 0);
          --muted-foreground: oklch(60% 0 0);

          /* Accent & destructive */
          --accent: oklch(25% 0 0);
          --accent-foreground: oklch(95% 0 0);
          --destructive: oklch(30% 0.15 17);
          --destructive-foreground: oklch(95% 0.05 17);

          /* Borders */
          --border: oklch(25% 0 0);
          --ring: oklch(35% 0 0);
        }
        ```
      </Tab>

      <Tab title="Border Radius">
        ```css theme={null}
        :root {
          /* Common - adjust these for overall feel */
          --radius-sm:  4px;    /* tags, chips */
          --radius-md:  6px;    /* small elements */
          --radius-lg:  10px;   /* buttons, inputs */
          --radius-xl:  12px;   /* cards */
          --radius-2xl: 16px;   /* modals, large panels */

        /_ Fine-grained (rarely needed) _/
        --radius-xs: 2px;
        --radius-3xl: 20px;
        --radius-4xl: 24px;
        --radius-5xl: 32px;
        }

        ```
      </Tab>

      <Tab title="Typography">
        ```css theme={null}
        :root {
          --font-size-page-header:      2.25rem;   /* 36px - main title */
          --font-size-heading:          1.5rem;    /* 24px - section headings */
          --font-size-title:            1.25rem;   /* 20px - card titles */
          --font-size-subtitle:         1.125rem;  /* 18px - secondary headings */
          --font-size-body:             1rem;      /* 16px - body text */
          --font-size-paragraph:        0.875rem;  /* 14px - descriptions */
          --font-size-label:            0.875rem;  /* 14px - form labels */
          --font-size-page-description: 0.875rem;  /* 14px - subtitles */
        }
        ```
      </Tab>
    </Tabs>

    ***

    ## Style components

    Every component accepts a `styling` prop for targeted overrides without affecting global styles.

    ```tsx layout.tsx theme={null}
    <SsoProviderTable
      styling={{
        variables: {
          common: {
            "--primary": "#059669", // override just for this component
          },
          light: { "--card": "#f8fafc" },
          dark: { "--card": "#1e293b" },
        },
        classes: {
          "SsoProviderTable-header": "shadow-lg",
          "SsoProviderTable-table": "rounded-xl",
        },
      }}
    />
    ```

    **When to use:**

    * `variables` - CSS custom property overrides scoped to the component
    * `classes` - Tailwind or custom classes applied to specific component parts

    <Accordion title="Available class targets by component">
      Each component exposes class targets for its major sections:

      **SsoProviderCreate**

      * `SsoProviderCreate-header`, `SsoProviderCreate-wizard`
      * `ProviderSelect-root`, `ProviderDetails-root`, `ProviderConfigure-root`

      **SsoProviderTable**

      * `SsoProviderTable-header`, `SsoProviderTable-table`, `SsoProviderTable-row`

      **SsoProviderEdit**

      * `SsoProviderEdit-header`, `SsoProviderEdit-tabs`
      * `SsoProviderEdit-ssoTab`, `SsoProviderEdit-provisioningTab`, `SsoProviderEdit-domainsTab`

      **DomainTable**

      * `DomainTable-header`, `DomainTable-table`
      * `DomainTable-createModal`, `DomainTable-configureModal`, `DomainTable-deleteModal`

      **OrganizationDetailsEdit**

      * `OrganizationDetailsEdit-header`, `OrganizationDetailsEdit-form`, `OrganizationDetailsEdit-actions`
    </Accordion>

    ***

    ## Common customizations

    ### Brand colors (Hex)

    Convert your brand hex color to the format used in CSS:

    ```css theme={null}
    :root {
      /* Using hex directly */
      --primary: #4f46e5;
      --primary-foreground: #ffffff;

      /* Or oklch for better color manipulation */
      --primary: oklch(50% 0.2 265); /* purple */
    }
    ```

    ### Soft corners

    For a more rounded aesthetic across all components:

    ```css theme={null}
    :root {
      --radius-lg: 16px; /* buttons, inputs */
      --radius-xl: 20px; /* cards */
      --radius-2xl: 24px; /* modals */
    }
    ```

    ### Compact typography

    For denser UIs:

    ```css theme={null}
    :root {
      --font-size-page-header: 1.75rem;
      --font-size-heading: 1.25rem;
      --font-size-title: 1rem;
      --font-size-body: 0.875rem;
    }
    ```

    ***

    ## Dark mode

    The components automatically respond to the `mode` setting in `themeSettings`. To sync with your app's dark mode:

    ```tsx theme={null}
    function App() {
      const [isDark, setIsDark] = useState(false);

      return (
        <Auth0ComponentProvider
          mode="proxy"
          domain="your-tenant.auth0.com"
          proxyConfig={{ baseUrl: "/api/auth" }}
          themeSettings={{
            mode: isDark ? "dark" : "light",
          }}
        >
          <YourApp />
        </Auth0ComponentProvider>
      );
    }
    ```

    Or use system preference:

    ```tsx theme={null}
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    <Auth0ComponentProvider
      mode="proxy"
      domain="your-tenant.auth0.com"
      proxyConfig={{ baseUrl: "/api/auth" }}
      themeSettings={{ mode: prefersDark ? 'dark' : 'light' }}
    >
    ```
  </Tab>

  <Tab title="shadcn">
    ## Get started

    1. No style import needed.

    With Shadcn, styles are already included in your Tailwind build. No additional imports are required.

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      If you're using Tailwind v4, add `@import
              "@auth0/universal-components-react/tailwind"` to your CSS file.
    </Callout>

    2. Add your brand color.

    ```css theme={null}
    :root {
      --primary: #4f46e5; /* your brand color */
      --primary-foreground: #ffffff; /* text on buttons */
    }
    ```

    Done. All buttons, links, and active states now use your brand.

    ***

    ## Theme presets

    Pass `themeSettings` to `Auth0ComponentProvider` to switch between built-in themes.

    ```tsx App.tsx theme={null}
    <Auth0ComponentProvider
      themeSettings={{
        mode: "light", // 'light' | 'dark'
        theme: "default", // 'default' | 'minimal' | 'rounded'
      }}
    >
      <App />
    </Auth0ComponentProvider>
    ```

    <table class="table">
      <thead>
        <tr>
          <th>Preset</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>default</code>
          </td>

          <td>Standard Auth0 look with balanced shadows and borders</td>
        </tr>

        <tr>
          <td>
            <code>minimal</code>
          </td>

          <td>Reduced visual weight with fewer shadows and lighter borders</td>
        </tr>

        <tr>
          <td>
            <code>rounded</code>
          </td>

          <td>Increased border radii for a softer appearance</td>
        </tr>
      </tbody>
    </table>

    ***

    ## Review CSS variables

    All visual properties are driven by CSS custom properties. Override them in your stylesheet or via the `themeSettings.variables` prop.

    <Tabs>
      <Tab title="Colors (Light)">
        ```css theme={null}
        :root {
          /* Brand - the most impactful variables */
          --primary: oklch(37% 0 0);              /* buttons, links, active states */
          --primary-foreground: oklch(100% 0 0);  /* text on primary surfaces */

        /_ Surfaces _/
        --background: oklch(100% 0 0); /_ page background _/
        --foreground: oklch(9% 0 0); /_ default text _/
        --card: oklch(100% 0 0); /_ card background _/
        --card-foreground: oklch(0% 0 0); /_ text inside cards _/
        --popover: oklch(100% 0 0); /_ dropdown/dialog background _/
        --popover-foreground: oklch(9% 0 0); /_ text inside popovers _/
        --input: oklch(100% 0 0); /_ input field background _/

        /_ Secondary & muted _/
        --secondary: oklch(96% 0 0);
        --secondary-foreground: oklch(100% 0 0);
        --muted: oklch(96% 0 0); /_ disabled backgrounds _/
        --muted-foreground: oklch(45% 0 0); /_ placeholder text _/

        /_ Accent & destructive _/
        --accent: oklch(97% 0 0); /_ hover highlights _/
        --accent-foreground: oklch(9% 0 0);
        --destructive: oklch(93% 0.03 17); /_ error states _/
        --destructive-foreground: oklch(36% 0.14 17);

        /_ Borders _/
        --border: oklch(89% 0 0);
        --ring: oklch(89% 0 0); /_ focus ring _/
        }

        ```
      </Tab>

      <Tab title="Colors (Dark)">
        ```css theme={null}
        .dark {
          /* Brand */
          --primary: oklch(70% 0.15 250);         /* brighter for dark backgrounds */
          --primary-foreground: oklch(10% 0 0);

          /* Surfaces */
          --background: oklch(12% 0 0);
          --foreground: oklch(95% 0 0);
          --card: oklch(15% 0 0);
          --card-foreground: oklch(95% 0 0);
          --popover: oklch(15% 0 0);
          --popover-foreground: oklch(95% 0 0);
          --input: oklch(18% 0 0);

          /* Secondary & muted */
          --secondary: oklch(20% 0 0);
          --secondary-foreground: oklch(95% 0 0);
          --muted: oklch(20% 0 0);
          --muted-foreground: oklch(60% 0 0);

          /* Accent & destructive */
          --accent: oklch(25% 0 0);
          --accent-foreground: oklch(95% 0 0);
          --destructive: oklch(30% 0.15 17);
          --destructive-foreground: oklch(95% 0.05 17);

          /* Borders */
          --border: oklch(25% 0 0);
          --ring: oklch(35% 0 0);
        }
        ```
      </Tab>

      <Tab title="Border Radius">
        ```css theme={null}
        :root {
          /* Common - adjust these for overall feel */
          --radius-sm:  4px;    /* tags, chips */
          --radius-md:  6px;    /* small elements */
          --radius-lg:  10px;   /* buttons, inputs */
          --radius-xl:  12px;   /* cards */
          --radius-2xl: 16px;   /* modals, large panels */

        /_ Fine-grained (rarely needed) _/
        --radius-xs: 2px;
        --radius-3xl: 20px;
        --radius-4xl: 24px;
        --radius-5xl: 32px;
        }

        ```
      </Tab>

      <Tab title="Typography">
        ```css theme={null}
        :root {
          --font-size-page-header:      2.25rem;   /* 36px - main title */
          --font-size-heading:          1.5rem;    /* 24px - section headings */
          --font-size-title:            1.25rem;   /* 20px - card titles */
          --font-size-subtitle:         1.125rem;  /* 18px - secondary headings */
          --font-size-body:             1rem;      /* 16px - body text */
          --font-size-paragraph:        0.875rem;  /* 14px - descriptions */
          --font-size-label:            0.875rem;  /* 14px - form labels */
          --font-size-page-description: 0.875rem;  /* 14px - subtitles */
        }
        ```
      </Tab>
    </Tabs>

    ***

    ## Style components

    Every component accepts a `styling` prop for targeted overrides without affecting global styles.

    ```tsx theme={null}
    <SsoProviderTable
      styling={{
        variables: {
          common: {
            "--primary": "#059669", // override just for this component
          },
          light: { "--card": "#f8fafc" },
          dark: { "--card": "#1e293b" },
        },
        classes: {
          "SsoProviderTable-header": "shadow-lg",
          "SsoProviderTable-table": "rounded-xl",
        },
      }}
    />
    ```

    **When to use:**

    * `variables` - CSS custom property overrides scoped to the component
    * `classes` - Tailwind or custom classes applied to specific component parts

    <Accordion title="Available class targets by component">
      Each component exposes class targets for its major sections:

      **SsoProviderCreate**

      * `SsoProviderCreate-header`, `SsoProviderCreate-wizard`
      * `ProviderSelect-root`, `ProviderDetails-root`, `ProviderConfigure-root`

      **SsoProviderTable**

      * `SsoProviderTable-header`, `SsoProviderTable-table`, `SsoProviderTable-row`

      **SsoProviderEdit**

      * `SsoProviderEdit-header`, `SsoProviderEdit-tabs`
      * `SsoProviderEdit-ssoTab`, `SsoProviderEdit-provisioningTab`, `SsoProviderEdit-domainsTab`

      **DomainTable**

      * `DomainTable-header`, `DomainTable-table`
      * `DomainTable-createModal`, `DomainTable-configureModal`, `DomainTable-deleteModal`

      **OrganizationDetailsEdit**

      * `OrganizationDetailsEdit-header`, `OrganizationDetailsEdit-form`, `OrganizationDetailsEdit-actions`
    </Accordion>

    ***

    ## Common customizations

    ### Brand colors (Hex)

    Convert your brand hex color to the format used in CSS:

    ```css theme={null}
    :root {
      /* Using hex directly */
      --primary: #4f46e5;
      --primary-foreground: #ffffff;

      /* Or oklch for better color manipulation */
      --primary: oklch(50% 0.2 265); /* purple */
    }
    ```

    ### Soft corners

    For a more rounded aesthetic across all components:

    ```css theme={null}
    :root {
      --radius-lg: 16px; /* buttons, inputs */
      --radius-xl: 20px; /* cards */
      --radius-2xl: 24px; /* modals */
    }
    ```

    ### Compact typography

    For denser UIs:

    ```css theme={null}
    :root {
      --font-size-page-header: 1.75rem;
      --font-size-heading: 1.25rem;
      --font-size-title: 1rem;
      --font-size-body: 0.875rem;
    }
    ```

    ***

    ## Dark mode

    The components automatically respond to the `mode` setting in `themeSettings`. To sync with your app's dark mode:

    ```tsx theme={null}
    function App() {
      const [isDark, setIsDark] = useState(false);

      return (
        <Auth0ComponentProvider
          themeSettings={{
            mode: isDark ? "dark" : "light",
          }}
        >
          <YourApp />
        </Auth0ComponentProvider>
      );
    }
    ```

    Or use system preference:

    ```tsx theme={null}
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    <Auth0ComponentProvider
      themeSettings={{ mode: prefersDark ? 'dark' : 'light' }}
    >
    ```
  </Tab>
</Tabs>