Passer au contenu principal

​
Démarrage rapide

​
1. Importez la feuille de style

import "@auth0/universal-components-react/styles";
Utilisateurs Tailwind v4 : ajoutez @import "@auth0/universal-components-react/tailwind" à votre feuille de style CSS.Utilisateurs shadcn : aucune importation nécessaire, les styles se trouvent déjà dans votre build Tailwind.

​
2. Ajoutez la couleur de votre image de marque

:root {
  --primary: #4f46e5; /* your brand color */
  --primary-foreground: #ffffff; /* text on buttons */
}
Terminé. Tous les boutons, les liens et les états actifs affichent maintenant votre image de marque.

​
Préréglages du thème

Passer themeSettings à Auth0ComponentProvider pour basculer entre les thèmes intégrés. 
<Auth0ComponentProvider
  themeSettings={{
    mode: "light", // 'light' | 'dark'
    theme: "default", // 'default' | 'minimal' | 'rounded'
  }}
>
  <App />
</Auth0ComponentProvider>
PréréglageDescription
defaultApparence Auth0 standard avec ombres et bordures équilibrées
minimalPoids visuel réduit : moins d’ombres, bordures plus claires
roundedDes rayons de bordure augmentés pour un rendu plus doux

​
Référence des variables CSS

Toutes les propriétés visuelles sont gérées par des propriétés CSS personnalisées. Vous pouvez les redéfinir dans votre feuille de style ou via la propriété themeSettings.variables. 
: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 par composant

Chaque composant accepte une propriété styling pour des remplacements ciblés sans toucher les styles globaux. 
<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",
    },
  }}
/>
Quand utiliser :
  • variables – Remplacements de propriétés CSS personnalisées limitées au composant
  • classes – Classes Tailwind ou classes personnalisées appliquées à des composants précis
Chaque composant expose des cibles de classe pour ses sections principales :SsoProviderCreate– SsoProviderCreate-header, SsoProviderCreate-wizard – ProviderSelect-root, ProviderDetails-root, ProviderConfigure-rootSsoProviderTable– SsoProviderTable-header, SsoProviderTable-table, SsoProviderTable-rowSsoProviderEdit– SsoProviderEdit-header, SsoProviderEdit-tabs – SsoProviderEdit-ssoTab, SsoProviderEdit-provisioningTab, SsoProviderEdit-domainsTabDomainTable– DomainTable-header, DomainTable-table – DomainTable-createModal, DomainTable-configureModal, DomainTable-deleteModalOrganizationDetailsEdit– OrganizationDetailsEdit-header, OrganizationDetailsEdit-form, OrganizationDetailsEdit-actions

​
Personnalisations courantes

​
Couleurs de la marque (HEX)

Convertissez la couleur hexadécimale de votre marque au format utilisé dans CSS : 
:root {
  /* Using hex directly */
  --primary: #4f46e5;
  --primary-foreground: #ffffff;

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

​
Coins plus arrondis

Pour une esthétique plus arrondie de tous les composants : 
:root {
  --radius-lg: 16px; /* buttons, inputs */
  --radius-xl: 20px; /* cards */
  --radius-2xl: 24px; /* modals */
}

​
Typographie compacte

Pour des interfaces utilisateur plus denses : 
:root {
  --font-size-page-header: 1.75rem;
  --font-size-heading: 1.25rem;
  --font-size-title: 1rem;
  --font-size-body: 0.875rem;
}

​
Mode sombre

Les composants réagissent automatiquement au paramètre mode dans themeSettings. Pour synchroniser avec le mode sombre de votre application : 
function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <Auth0ComponentProvider
      themeSettings={{
        mode: isDark ? "dark" : "light",
      }}
    >
      <YourApp />
    </Auth0ComponentProvider>
  );
}
Ou utilisez les préférences système : 
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

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