Customize Style and Themes with Auth0 Universal Components

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. To learn more, read Product Release Stages.

Auth0 Universal Components are built on a flexible design system utilizes Tailwind CSS and Radix UI primitives. Styling is orchestrated through the Auth0ComponentProvider 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.

React
Next.js
shadcn

Get started

Import the stylesheet.

import "@auth0/universal-components-react/styles";

Tailwind v4 users: Add @import "@auth0/universal-components-react/tailwind" to your CSS file.

Add your brand color.

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

App.tsx

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

Preset	Description
`default`	Standard Auth0 look with balanced shadows and borders
`minimal`	Reduced visual weight with fewer shadows and lighter borders
`rounded`	Increased border radii for a softer appearance

Review CSS variables

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

Colors (Light)
Colors (Dark)
Border Radius
Typography

: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 _/
}

.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);
}

: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;
}

: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 */
}

Style components

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

<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

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

Common customizations

Brand colors (Hex)

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

: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:

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

Compact typography

For denser UIs:

: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:

function App() {
  const [isDark, setIsDark] = useState(false);

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

Or use system preference:

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

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

Get started

Import the stylesheet.

In your root layout file:

layout.tsx

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>
  );
}

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.

Add your brand color.

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

layout.tsx

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

Preset	Description
`default`	Standard Auth0 look with balanced shadows and borders
`minimal`	Reduced visual weight with fewer shadows and lighter borders
`rounded`	Increased border radii for a softer appearance

Review CSS variables

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

Colors (Light)
Colors (Dark)
Border Radius
Typography

: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 _/
}

.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);
}

: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;
}

: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 */
}

Style components

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

layout.tsx

<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

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

Common customizations

Brand colors (Hex)

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

: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:

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

Compact typography

For denser UIs:

: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:

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:

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' }}
>

Get started

No style import needed.

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

If you’re using Tailwind v4, add @import "@auth0/universal-components-react/tailwind" to your CSS file.

Add your brand color.

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

App.tsx

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

Preset	Description
`default`	Standard Auth0 look with balanced shadows and borders
`minimal`	Reduced visual weight with fewer shadows and lighter borders
`rounded`	Increased border radii for a softer appearance

Review CSS variables

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

Colors (Light)
Colors (Dark)
Border Radius
Typography

: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 _/
}

.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);
}

: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;
}

: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 */
}

Style components

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

<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

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

Common customizations

Brand colors (Hex)

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

: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:

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

Compact typography

For denser UIs:

: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:

function App() {
  const [isDark, setIsDark] = useState(false);

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

Or use system preference:

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

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

​Get started

​Theme presets

​Review CSS variables

​Style components

​Common customizations

​Brand colors (Hex)

​Soft corners

​Compact typography

​Dark mode

​Get started

​Theme presets

​Review CSS variables

​Style components

​Common customizations

​Brand colors (Hex)

​Soft corners

​Compact typography

​Dark mode

​Get started

​Theme presets

​Review CSS variables

​Style components

​Common customizations

​Brand colors (Hex)

​Soft corners

​Compact typography

​Dark mode

Get started

Theme presets

Review CSS variables

Style components

Common customizations

Brand colors (Hex)

Soft corners

Compact typography

Dark mode

Get started

Theme presets

Review CSS variables

Style components

Common customizations

Brand colors (Hex)

Soft corners

Compact typography

Dark mode

Get started

Theme presets

Review CSS variables

Style components

Common customizations

Brand colors (Hex)

Soft corners

Compact typography

Dark mode