Skip to main content
Auth0 Universal Components are built on a design system backed by Tailwind CSS and Radix UI primitives. You apply brand customization by setting CSS custom properties that the components read directly. Choose your CSS setup below, then use the shared customization options that follow.

​
Setup

Import the pre-compiled stylesheet in your app entry point:
import "@auth0/universal-components-react/styles";
Then override tokens in your CSS:
:root {
  --auth0-primary: #4f46e5;            /* your brand color */
  --auth0-primary-foreground: #ffffff; /* text on primary surfaces */
}
All component colors cascade from these two tokens. Add more from the CSS variables reference as needed.
In plain CSS mode, setting --primary or --color-primary has no effect. The compiled stylesheet reads --auth0-* variables directly.

​
Theme presets

Pass themeSettings to Auth0ComponentProvider to switch between built-in visual variants. 
<Auth0ComponentProvider
  themeSettings={{
    mode: "light", // 'light' | 'dark'
    theme: "default", // 'default' | 'minimal' | 'rounded'
  }}
>
  <App />
</Auth0ComponentProvider>
PresetDescription
defaultStandard Auth0 look with balanced shadows and borders
minimalReduced visual weight — fewer shadows, lighter borders
roundedIncreased border radii for a softer appearance
Shadow variables only take effect with the default preset. The minimal and rounded presets disable shadows internally.

​
CSS variables reference

All visual properties are driven by CSS custom properties. Override them in your stylesheet (as shown in Setup above) or via the themeSettings.variables prop.
Set these in :root for light mode defaults. Use .dark or themeSettings.mode for dark mode values.The token names depend on which setup you chose above.
:root {
  /* Brand */
  --auth0-primary: oklch(37% 0 0);              /* buttons, links, active states */
  --auth0-primary-foreground: oklch(100% 0 0);  /* text on primary surfaces */

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

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

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

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

​
Override via JS API

Pass themeSettings.variables to Auth0ComponentProvider for programmatic overrides. These take the highest specificity and override both :root CSS and any stylesheet values. Variables are organized into three buckets:
  • common — applied regardless of mode (radius, typography)
  • light — applied when mode: "light"
  • dark — applied when mode: "dark"
<Auth0ComponentProvider
  themeSettings={{
    mode: "light",
    variables: {
      common: {
        "--radius-lg": "12px",
        "--font-size-body": "0.875rem",
      },
      light: {
        "--auth0-primary": "#4f46e5",
        "--auth0-primary-foreground": "#ffffff",
        "--auth0-background": "#fafafa",
      },
      dark: {
        "--auth0-primary": "#818cf8",
        "--auth0-background": "#121212",
      },
    },
  }}
>
  <App />
</Auth0ComponentProvider>
themeSettings.variables always uses --auth0-* names for color tokens, regardless of your CSS setup. Border radius and typography tokens use their own names (--radius-*, --font-size-*).

​
Override per component

Every component accepts a styling prop to scope overrides without affecting global styles. 
<SsoProviderTable
  styling={{
    variables: {
      common: {
        "--radius-lg": "16px",
      },
      light: {
        "--auth0-primary": "#059669",
        "--auth0-card": "#f8fafc",
      },
      dark: {
        "--auth0-primary": "#34d399",
        "--auth0-card": "#1e293b",
      },
    },
    classes: {
      "SsoProviderTable-header": "shadow-lg",
      "SsoProviderTable-table": "rounded-xl",
    },
  }}
/>
Use variables for CSS token overrides scoped to this component, and classes for Tailwind or custom classes applied to specific component parts.
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

​
Common customizations

​
Brand color

:root {
  --auth0-primary: #4f46e5;
  --auth0-primary-foreground: #ffffff;
}

​
Soft corners

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

​
Compact typography

:root {
  --font-size-page-header: 1.75rem;
  --font-size-heading: 1.25rem;
  --font-size-title: 1rem;
  --font-size-body: 0.875rem;
}

​
Dark mode

Components respond to themeSettings.mode. Wire it to your app’s theme state: 
function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <Auth0ComponentProvider
      themeSettings={{ mode: isDark ? "dark" : "light" }}
    >
      <YourApp />
    </Auth0ComponentProvider>
  );
}
Or sync with system preference: 
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

<Auth0ComponentProvider
  themeSettings={{ mode: prefersDark ? "dark" : "light" }}
>
For Next.js with server-side rendering, read the preferred mode from a cookie to avoid a flash on load:
layout.tsx
export default async function RootLayout({ children }) {
  const cookieStore = await cookies();
  const mode = cookieStore.get("theme-mode")?.value === "dark" ? "dark" : "light";

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