Passer au contenu principal
Auth0 Universal Components est actuellement en accès anticipé. En l’utilisant, vous acceptez les conditions applicables de l’essai gratuit dans le Master Subscription Agreement d’Okta. Pour en savoir plus, consultez les phases de lancement des produits.
Auth0 Universal Components repose sur un système de conception flexible qui utilise Tailwind CSS et les primitives de Radix UI. Le style est géré par Auth0ComponentProvider, ce qui vous permet de choisir entre des préréglages de haut niveau ou des surcharges précises au moyen de variables CSS. Cette architecture garantit que vos flux d’identité aient l’apparence et le comportement d’éléments natifs de votre application.

​
Démarrer

  1. Importez la feuille de style.
import "@auth0/universal-components-react/styles";
Utilisateurs de Tailwind v4 : ajoutez @import "@auth0/universal-components-react/tailwind" à votre fichier CSS.
  1. Ajoutez la couleur de votre marque.
:root {
  --primary: #4f46e5; /* couleur de votre marque */
  --primary-foreground: #ffffff; /* texte sur les boutons */
}
Terminé. Tous les boutons, liens et états actifs reflètent maintenant votre marque.

​
Préréglages de thème

Transmettez themeSettings à Auth0ComponentProvider pour basculer entre les thèmes intégrés.
App.tsx
<Auth0ComponentProvider
  themeSettings={{
    mode: "light", // 'light' | 'dark' (clair | sombre)
    theme: "default", // 'default' | 'minimal' | 'rounded' (défaut | minimal | arrondi)
  }}
>
  <App />
</Auth0ComponentProvider>
PréréglageDescription
defaultStyle Auth0 standard avec des ombres et des bordures équilibrées
minimalImpact visuel réduit avec moins d’ombres et des bordures plus discrètes
roundedCoins plus arrondis pour une apparence plus douce

​
Examiner les variables CSS

Toutes les propriétés visuelles sont définies par des propriétés personnalisées CSS. Remplacez-les dans votre feuille de style ou via la prop themeSettings.variables.
:root {
  /* Marque - les variables les plus importantes */
  --primary: oklch(37% 0 0);              /* boutons, liens, états actifs */
  --primary-foreground: oklch(100% 0 0);  /* texte sur les surfaces primaires */

/_ Surfaces _/
--background: oklch(100% 0 0); /_ arrière-plan de la page _/
--foreground: oklch(9% 0 0); /_ texte par défaut _/
--card: oklch(100% 0 0); /_ arrière-plan de la carte _/
--card-foreground: oklch(0% 0 0); /_ texte à l'intérieur des cartes _/
--popover: oklch(100% 0 0); /_ arrière-plan du menu déroulant/dialogue _/
--popover-foreground: oklch(9% 0 0); /_ texte à l'intérieur des popovers _/
--input: oklch(100% 0 0); /_ arrière-plan du champ de saisie _/

/_ Secondaire et atténué _/
--secondary: oklch(96% 0 0);
--secondary-foreground: oklch(100% 0 0);
--muted: oklch(96% 0 0); /_ arrière-plans désactivés _/
--muted-foreground: oklch(45% 0 0); /_ texte d'espace réservé _/

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

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

​
Composants de style

Chaque composant accepte une prop styling pour des substitutions ciblées sans affecter les styles globaux.
<SsoProviderTable
  styling={{
    variables: {
      common: {
        "--primary": "#059669", // remplacer uniquement pour ce composant
      },
      light: { "--card": "#f8fafc" },
      dark: { "--card": "#1e293b" },
    },
    classes: {
      "SsoProviderTable-header": "shadow-lg",
      "SsoProviderTable-table": "rounded-xl",
    },
  }}
/>
Quand utiliser :
  • variables - redéfinitions des propriétés personnalisées CSS propres au composant
  • classes - classes Tailwind ou personnalisées appliquées à des parties précises du composant
Chaque composant expose des classes cibles pour ses principales 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

​
Personnalisations courantes

​
Couleurs de marque (Hex)

Convertissez la couleur hexadécimale de votre marque au format utilisé en CSS :
:root {
  /* Utilisation directe de la valeur hexadécimale */
  --primary: #4f46e5;
  --primary-foreground: #ffffff;

  /* Ou oklch pour une meilleure manipulation des couleurs */
  --primary: oklch(50% 0.2 265); /* violet */
}

​
Coins arrondis

Pour une esthétique plus arrondie sur l’ensemble des composants :
:root {
  --radius-lg: 16px; /* boutons, champs de saisie */
  --radius-xl: 20px; /* cartes */
  --radius-2xl: 24px; /* fenêtres modales */
}

​
Typographie compacte

Pour les interfaces 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épondent 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 utiliser la préférence système :
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

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