Skip to main content
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.

​
Get started

  1. Import the stylesheet.
import "@auth0/universal-components-react/styles";
Tailwind v4 users: Add @import "@auth0/universal-components-react/tailwind" to your CSS file.
  1. 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>
PresetDescription
defaultStandard Auth0 look with balanced shadows and borders
minimalReduced visual weight with fewer shadows and lighter borders
roundedIncreased 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.
: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 */
}

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