Saltar al contenido principal
Auth0 Universal Components se encuentra actualmente en acceso anticipado. Al usarlo, acepta los términos aplicables de la prueba gratuita del Contrato Marco de Suscripción de Okta. Para obtener más información, consulte Etapas de lanzamiento del producto.
Auth0 Universal Components se basa en un sistema de diseño flexible que utiliza Tailwind CSS y primitivas de Radix UI. La personalización de estilos se gestiona mediante Auth0ComponentProvider, lo que le permite elegir entre preajustes generales o ajustes detallados de variables CSS. Esta arquitectura garantiza que sus flujos de identidad tengan la apariencia y el comportamiento de partes nativas de su aplicación.

​
Comenzar

  1. Importa la hoja de estilo.
import "@auth0/universal-components-react/styles";
Usuarios de Tailwind v4: Agreguen @import "@auth0/universal-components-react/tailwind" a su archivo CSS.
  1. Añade el color de tu marca.
:root {
  --primary: #4f46e5; /* el color de tu marca */
  --primary-foreground: #ffffff; /* texto en los botones */
}
Listo. Todos los botones, links y estados activos ahora usan tu marca.

​
Preajustes de tema

Pasa themeSettings a Auth0ComponentProvider para alternar entre los temas integrados.
App.tsx
<Auth0ComponentProvider
  themeSettings={{
    mode: "light", // 'light' | 'dark'
    theme: "default", // 'default' | 'minimal' | 'rounded'
  }}
>
  <App />
</Auth0ComponentProvider>
PredefinidoDescripción
defaultApariencia estándar de Auth0 con sombras y bordes equilibrados
minimalMenor peso visual, con menos sombras y bordes más sutiles
roundedRadios de borde más amplios para una apariencia más suave

​
Revisar variables CSS

Todas las propiedades visuales están controladas por propiedades personalizadas de CSS. Puedes sobrescribirlas en tu hoja de estilos o mediante la prop themeSettings.variables.
:root {
  /* Marca - las variables de mayor impacto */
  --primary: oklch(37% 0 0);              /* botones, enlaces, estados activos */
  --primary-foreground: oklch(100% 0 0);  /* texto sobre superficies primarias */

/_ Superficies _/
--background: oklch(100% 0 0); /_ fondo de página _/
--foreground: oklch(9% 0 0); /_ texto predeterminado _/
--card: oklch(100% 0 0); /_ fondo de tarjeta _/
--card-foreground: oklch(0% 0 0); /_ texto dentro de tarjetas _/
--popover: oklch(100% 0 0); /_ fondo de desplegable/diálogo _/
--popover-foreground: oklch(9% 0 0); /_ texto dentro de popovers _/
--input: oklch(100% 0 0); /_ fondo de campo de entrada _/

/_ Secundario y atenuado _/
--secondary: oklch(96% 0 0);
--secondary-foreground: oklch(100% 0 0);
--muted: oklch(96% 0 0); /_ fondos deshabilitados _/
--muted-foreground: oklch(45% 0 0); /_ texto de marcador de posición _/

/_ Acento y destructivo _/
--accent: oklch(97% 0 0); /_ resaltados al pasar el cursor _/
--accent-foreground: oklch(9% 0 0);
--destructive: oklch(93% 0.03 17); /_ estados de error _/
--destructive-foreground: oklch(36% 0.14 17);

/_ Bordes _/
--border: oklch(89% 0 0);
--ring: oklch(89% 0 0); /_ anillo de enfoque _/
}

​
Componentes de estilo

Cada componente acepta una prop styling para aplicar anulaciones específicas sin afectar los estilos globales.
<SsoProviderTable
  styling={{
    variables: {
      common: {
        "--primary": "#059669", // solo para este componente
      },
      light: { "--card": "#f8fafc" },
      dark: { "--card": "#1e293b" },
    },
    classes: {
      "SsoProviderTable-header": "shadow-lg",
      "SsoProviderTable-table": "rounded-xl",
    },
  }}
/>
Cuándo usar:
  • variables - anulaciones de propiedades personalizadas de CSS limitadas al componente
  • classes - Clases de Tailwind o personalizadas aplicadas a partes específicas del componente
Cada componente expone clases de destino para sus secciones principales: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

​
Personalizaciones comunes

​
Colores de marca (Hex)

Convierte el color hexadecimal de tu marca al formato que usa CSS:
:root {
  /* Usando hex directamente */
  --primary: #4f46e5;
  --primary-foreground: #ffffff;

  /* O bien oklch para una mejor manipulación del color */
  --primary: oklch(50% 0.2 265); /* morado */
}

​
Esquinas redondeadas

Para una estética más redondeada en todos los componentes:
:root {
  --radius-lg: 16px; /* botones, entradas */
  --radius-xl: 20px; /* tarjetas */
  --radius-2xl: 24px; /* modales */
}

​
Tipografía compacta

Para interfaces de usuario más densas:
:root {
  --font-size-page-header: 1.75rem;
  --font-size-heading: 1.25rem;
  --font-size-title: 1rem;
  --font-size-body: 0.875rem;
}

​
Modo oscuro

Los componentes responden automáticamente a la configuración mode en themeSettings. Para sincronizar con el modo oscuro de tu aplicación:
function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <Auth0ComponentProvider
      themeSettings={{
        mode: isDark ? "dark" : "light",
      }}
    >
      <YourApp />
    </Auth0ComponentProvider>
  );
}
O usar la preferencia del sistema:
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

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