Skip to main content

​
Quick Start

​
1. Import the stylesheet

import "@auth0/universal-components-react/styles";
Tailwind v4 users: Add @import "@auth0/universal-components-react/tailwind" to your CSS file instead.shadcn users: No import needed - styles are already in your Tailwind build.

​
2. 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. 
<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

​
CSS Variables Reference

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

​
Per-Component Styling

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

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