Personnaliser le style et les thèmes avec Auth0 Universal Components

Personnalisez Auth0 Universal Components à l’aide de variables CSS, de Tailwind v4 et de préréglages de thèmes intégrés.

Auth0 Universal Components repose sur un système de conception basé sur Tailwind CSS et les primitives de Radix UI. Personnalisez votre image de marque en définissant des propriétés CSS personnalisées que les composants lisent directement.

Choisissez votre configuration CSS ci-dessous.

CSS simple

​

Configuration

Faites l’importation de la feuille de styles précompilée dans le point d’entrée de votre application :

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

Remplacez ensuite les jetons dans votre CSS :

:root {
  --auth0-primary: #4f46e5;            /* la couleur de votre image de marque */
  --auth0-primary-foreground: #ffffff; /* texte sur les surfaces principales */
}

Toutes les couleurs des composants découlent de ces deux jetons. Ajoutez-en d’autres au besoin à partir de la référence des variables CSS.

En mode CSS standard, définir --primary ou --color-primary n’a aucun effet. La feuille de style compilée utilise directement les variables --auth0-*.

---

​

Préréglages de thème

Passez themeSettings à Auth0ComponentProvider pour basculer d’une variante visuelle intégrée à l’autre.

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

Préréglage	Description
default	Apparence Auth0 standard avec des ombres et des bordures équilibrées
minimal	Poids visuel réduit — moins d’ombres et des bordures plus fines
rounded	Rayons de bordure plus grands pour une apparence plus douce

Les variables d’ombre ne s’appliquent qu’avec le préréglage default. Les préréglages minimal et rounded désactivent les ombres en interne.

---

​

Référence des variables CSS

Toutes les propriétés visuelles sont gérées par des propriétés personnalisées CSS. Remplacez-les dans votre feuille de styles (comme illustré dans la section Setup ci-dessus) ou au moyen de la prop themeSettings.variables.

Définissez-les dans :root pour les valeurs par défaut du mode clair. Utilisez .dark ou themeSettings.mode pour les valeurs du mode sombre.

Couleurs

:root {
  /* Image de marque */
  --auth0-primary: oklch(37% 0 0);              /* boutons, liens, états actifs */
  --auth0-primary-foreground: oklch(100% 0 0);  /* texte sur les surfaces principales */

  /* Surfaces */
  --auth0-background: oklch(100% 0 0);          /* arrière-plan de la page */
  --auth0-foreground: oklch(9% 0 0);            /* texte par défaut */
  --auth0-card: oklch(100% 0 0);                /* arrière-plan des cartes */
  --auth0-card-foreground: oklch(0% 0 0);       /* texte dans les cartes */
  --auth0-popover: oklch(100% 0 0);             /* arrière-plan des menus déroulants et boîtes de dialogue */
  --auth0-popover-foreground: oklch(9% 0 0);    /* texte dans les fenêtres contextuelles */
  --auth0-input: oklch(100% 0 0);               /* arrière-plan des champs de saisie */

  /* Secondaires et atténuées */
  --auth0-secondary: oklch(96% 0 0);
  --auth0-secondary-foreground: oklch(100% 0 0);
  --auth0-muted: oklch(96% 0 0);                /* arrière-plans désactivés ou discrets */
  --auth0-muted-foreground: oklch(45% 0 0);     /* texte indicatif */

  /* Accent et destructif */
  --auth0-accent: oklch(97% 0 0);               /* mises en évidence au survol */
  --auth0-accent-foreground: oklch(9% 0 0);
  --auth0-destructive: oklch(93% 0.03 17);      /* états d'erreur */
  --auth0-destructive-foreground: oklch(36% 0.14 17);

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

Couleurs de statut

Les jetons de couleur d’état n’ont pas de préfixe et sont définis indépendamment de l’ensemble de couleurs --auth0-*.

Jeton	Contrôle
--color-page	Arrière-plan de la page (conteneur le plus externe)
--color-info	Arrière-plan de l’alerte d’information
--color-info-foreground	Texte et icône de l’alerte d’information
--color-success	Arrière-plan de l’alerte de réussite
--color-success-foreground	Texte et icône de l’alerte de réussite
--color-warning	Arrière-plan de l’alerte d’avertissement
--color-warning-foreground	Texte et icône de l’alerte d’avertissement
--color-destructive-border	Bordure des champs de saisie ou des boutons destructifs
--color-popover-border	Bordure de la fenêtre contextuelle ou de la liste déroulante
--color-input-foreground	Couleur du texte des champs de saisie
--color-input-muted	Arrière-plan de la variante atténuée des champs de saisie

Redéfinissez-les dans :root ou au moyen de themeSettings.variables.light / .dark :

:root {
  --color-success: oklch(94% 0.05 145);
  --color-success-foreground: oklch(30% 0.1 145);
}

Rayon de bordure

:root {
  /* Les plus souvent ajustés */
  --radius-sm:  4px;   /* balises, puces */
  --radius-md:  6px;   /* petits éléments */
  --radius-lg:  10px;  /* boutons, champs de saisie */
  --radius-xl:  12px;  /* cartes */
  --radius-2xl: 16px;  /* fenêtres modales, grands panneaux */

  /* Réglage fin */
  --radius-xs:  2px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-5xl: 32px;
  --radius-6xl: 40px;
  --radius-7xl: 48px;
  --radius-8xl: 56px;
  --radius-9xl: 64px;
}

Typographie

:root {
  --font-size-page-header:      2.25rem;   /* 36 px — titre principal de la page */
  --font-size-heading:          1.5rem;    /* 24 px — titres de section */
  --font-size-title:            1.25rem;   /* 20 px — titres de carte */
  --font-size-subtitle:         1.125rem;  /* 18 px — titres secondaires */
  --font-size-body:             1rem;      /* 16 px — texte courant */
  --font-size-paragraph:        0.875rem;  /* 14 px — descriptions */
  --font-size-label:            0.875rem;  /* 14 px — libellés de formulaire */
  --font-size-page-description: 0.875rem;  /* 14 px — sous-titres de page */
}

---

​

Override via l’API JS

Passez themeSettings.variables à Auth0ComponentProvider pour appliquer des overrides par programmation. Ceux-ci ont la spécificité la plus élevée et remplacent aussi bien le CSS :root que les valeurs définies dans les feuilles de style.

Les variables sont réparties en trois catégories :

• common — appliqué quel que soit le mode (rayon, typographie)
• light — appliqué lorsque mode: "light"
• dark — appliqué lorsque 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 utilise toujours les noms --auth0-* pour les jetons de couleur, quelle que soit votre configuration CSS. Les jetons de rayon des bordures et de typographie utilisent leurs propres noms (--radius-*, --font-size-*).

---

​

Remplacement par composant

Chaque composant accepte une prop styling qui permet de limiter la portée des overrides sans toucher aux styles globaux.

<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",
    },
  }}
/>

Utilisez variables pour les overrides de token CSS limités à ce composant, et classes pour les classes Tailwind ou personnalisées appliquées à des parties précises du composant.

Cibles de classe offertes par composant

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

---

​

Personnalisations courantes

​

Couleur de l’image de marque

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

​

Coins arrondis

:root {
  --radius-lg: 16px;  /* boutons, champs de saisie */
  --radius-xl: 20px;  /* cartes */
  --radius-2xl: 24px; /* fenêtres modales */
}

​

Typographie compacte

: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 à themeSettings.mode. Reliez-le au state du thème de votre application :

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

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

Ou synchroniser avec les préférences du système :

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

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

Avec Next.js et le rendering côté serveur, lisez le mode préféré dans un cookie afin d’éviter un scintillement au chargement :

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

Tailwind v4

​

Configuration

Importez Tailwind ainsi que la feuille de styles du composant :

@import 'tailwindcss';
@import '@auth0/universal-components-react/tailwind';

Définissez vos jetons de design et rendez-les accessibles aux utilitaires Tailwind avec @theme inline :

@theme inline {
  --color-primary: var(--color-primary);
  --color-primary-foreground: var(--color-primary-foreground);
  /* ajoutez les autres jetons que vous utilisez dans les utilitaires Tailwind */
}

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

Next.js : Même approche : placez vos lignes @import et votre bloc @theme dans globals.css, puis répartissez les substitutions de couleurs dans des fichiers light.css et dark.css distincts, importés depuis globals.css. Importez globals.css dans votre fichier layout.tsx racine.

---

​

Préréglages de thème

Transmettez themeSettings à Auth0ComponentProvider pour basculer entre les variantes visuelles intégrées.

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

Préréglage	Description
default	Style Auth0 standard avec des ombres et des bordures équilibrées
minimal	Poids visuel réduit — moins d’ombres et des bordures plus légères
rounded	Rayons de bordure plus grands pour une apparence plus douce

Les variables d’ombre ne s’appliquent qu’avec le préréglage default. Les préréglages minimal et rounded désactivent les ombres à l’interne.

---

​

Référence des variables CSS

Toutes les propriétés visuelles sont pilotées par des propriétés personnalisées CSS. Remplacez-les dans votre feuille de styles (comme illustré dans Setup ci-dessus) ou au moyen de la prop themeSettings.variables.

Définissez-les dans :root pour les valeurs par défaut du mode clair. Utilisez .dark ou themeSettings.mode pour les valeurs du mode sombre.

Couleurs

:root {
  /* Image de marque */
  --color-primary: oklch(37% 0 0);              /* boutons, liens, états actifs */
  --color-primary-foreground: oklch(100% 0 0);  /* texte sur les surfaces primaires */

  /* Surfaces */
  --color-background: oklch(100% 0 0);          /* arrière-plan de la page */
  --color-foreground: oklch(9% 0 0);            /* texte par défaut */
  --color-card: oklch(100% 0 0);                /* arrière-plan des cartes */
  --color-card-foreground: oklch(0% 0 0);       /* texte dans les cartes */
  --color-popover: oklch(100% 0 0);             /* arrière-plan des menus déroulants et des boîtes de dialogue */
  --color-popover-foreground: oklch(9% 0 0);    /* texte dans les fenêtres contextuelles */
  --color-input: oklch(100% 0 0);               /* arrière-plan des champs de saisie */

  /* Secondaires et atténuées */
  --color-secondary: oklch(96% 0 0);
  --color-secondary-foreground: oklch(100% 0 0);
  --color-muted: oklch(96% 0 0);                /* arrière-plans désactivés ou discrets */
  --color-muted-foreground: oklch(45% 0 0);     /* texte indicatif */

  /* Accent et destructif */
  --color-accent: oklch(97% 0 0);               /* mises en évidence au survol */
  --color-accent-foreground: oklch(9% 0 0);
  --color-destructive: oklch(93% 0.03 17);      /* états d'erreur */
  --color-destructive-foreground: oklch(36% 0.14 17);

  /* Bordures */
  --color-border: oklch(89% 0 0);
  --color-ring: oklch(89% 0 0);                 /* anneau de focus */
}

Couleurs d’état

Les jetons de couleur de statut utilisent la même nomenclature --color-* que les jetons d’image de marque ci-dessus.

Jeton	Contrôle
--color-page	Arrière-plan de la page (conteneur le plus externe)
--color-info	Arrière-plan de l’alerte d’information
--color-info-foreground	Texte et icône de l’alerte d’information
--color-success	Arrière-plan de l’alerte de réussite
--color-success-foreground	Texte et icône de l’alerte de réussite
--color-warning	Arrière-plan de l’alerte d’avertissement
--color-warning-foreground	Texte et icône de l’alerte d’avertissement
--color-destructive-border	Bordure d’un champ ou bouton destructif
--color-popover-border	Bordure d’une fenêtre contextuelle ou liste déroulante
--color-input-foreground	Couleur du texte du champ
--color-input-muted	Arrière-plan de la variante de champ atténuée

Remplacez-les dans :root ou à l’aide de themeSettings.variables.light / .dark :

:root {
  --color-success: oklch(94% 0.05 145);
  --color-success-foreground: oklch(30% 0.1 145);
}

Rayon des bordures

:root {
  /* Les plus souvent ajustés */
  --radius-sm:  4px;   /* balises, puces */
  --radius-md:  6px;   /* petits éléments */
  --radius-lg:  10px;  /* boutons, champs de saisie */
  --radius-xl:  12px;  /* cartes */
  --radius-2xl: 16px;  /* fenêtres modales, grands panneaux */

  /* Réglage fin */
  --radius-xs:  2px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-5xl: 32px;
  --radius-6xl: 40px;
  --radius-7xl: 48px;
  --radius-8xl: 56px;
  --radius-9xl: 64px;
}

Typographie

:root {
  --font-size-page-header:      2.25rem;   /* 36 px — titre principal de la page */
  --font-size-heading:          1.5rem;    /* 24 px — titres de section */
  --font-size-title:            1.25rem;   /* 20 px — titres de carte */
  --font-size-subtitle:         1.125rem;  /* 18 px — titres secondaires */
  --font-size-body:             1rem;      /* 16 px — texte courant */
  --font-size-paragraph:        0.875rem;  /* 14 px — descriptions */
  --font-size-label:            0.875rem;  /* 14 px — étiquettes de formulaire */
  --font-size-page-description: 0.875rem;  /* 14 px — sous-titres de page */
}

---

​

Override via l’API JS

Passez themeSettings.variables à Auth0ComponentProvider pour appliquer des overrides par programmation. Ils possèdent la spécificité la plus élevée et remplacent à la fois le CSS :root et toute valeur définie dans les feuilles de style.

Les variables sont réparties en trois catégories :

• common — appliqué quel que soit le mode (rayon, typographie)
• light — appliqué lorsque mode: "light"
• dark — appliqué lorsque mode: "dark"

<Auth0ComponentProvider
  themeSettings={{
    mode: "light",
    variables: {
      common: {
        "--radius-lg": "12px",
        "--font-size-body": "0.875rem",
      },
    },
  }}
>
  <App />
</Auth0ComponentProvider>

---

​

Exception par composant

Chaque composant accepte une prop styling permettant de limiter la portée des remplacements sans toucher aux styles globaux.

<SsoProviderTable
  styling={{
    variables: {
      common: {
        "--radius-lg": "16px",
      },
    },
    classes: {
      "SsoProviderTable-header": "shadow-lg",
      "SsoProviderTable-table": "rounded-xl",
    },
  }}
/>

Utilisez variables pour les overrides de tokens CSS limités à ce composant, et classes pour les classes Tailwind ou personnalisées appliquées à des parties précises du composant.

Cibles de classe offertes par composant

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

---

​

Personnalisations courantes

​

Couleur de l’image de marque

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

​

Coins arrondis

:root {
  --radius-lg: 16px;  /* boutons, champs de saisie */
  --radius-xl: 20px;  /* cartes */
  --radius-2xl: 24px; /* fenêtres modales */
}

​

Typographie compacte

: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 à themeSettings.mode. Reliez-le au state du thème de votre application :

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

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

Ou synchronisez avec les préférences du système :

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

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

Avec Next.js et le rendering côté serveur, lisez le mode préféré depuis un cookie afin d’éviter un scintillement au chargement :

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