メインコンテンツへスキップ

​
クイックスタート

​
1. スタイルシートをインポートする

import "@auth0/universal-components-react/styles";
Tailwind v4を利用している場合：@import "@auth0/universal-components-react/tailwind"をCSSファイルに追加します。**shadcnを利用している場合：**インポート不要 - スタイルはすでにTailwindビルドに含まれています。

​
2. ブランドカラーを追加する

:root {
  --primary: #4f46e5; /* your brand color */
  --primary-foreground: #ffffff; /* text on buttons */
}
以上で、すべてのボタン、リンク、アクティブ状態にブランドが適用されます。

​
テーマプリセット

themeSettingsをAuth0ComponentProviderに渡して組み込みテーマを切り替えます。 
<Auth0ComponentProvider
  themeSettings={{
    mode: "light", // 'light' | 'dark'
    theme: "default", // 'default' | 'minimal' | 'rounded'
  }}
>
  <App />
</Auth0ComponentProvider>
プリセット説明
defaultバランスの取れた影と境界線のある標準的なAuth0の外観
minimal視覚的な重さを軽減 - 影が少なく、軽めの境界線
rounded境界線の半径が大きく、柔らかな外観

​
CSS変数のリファレンス

ビジュアルプロパティは、すべてCSSカスタムプロパティによって制御されます。スタイルシートか、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 _/
}

​
コンポーネントごとのスタイリング

すべてのコンポーネントは、グローバルスタイルに影響を与えることなく、ターゲットを絞ったオーバーライドのためのstylingプロパティを受け入れます。 
<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",
    },
  }}
/>
使うタイミング：
  • variables - コンポーネントに制約されたCSSカスタムプロパティのオーバーライド
  • classes - Tailwindまたは特定のコンポーネントパーツに適用されるカスタムクラス
各コンポーネントは、その主要セクションのクラスターゲットを公開します。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

​
一般的なカスタマイズ

​
ブランドカラー（16進数）

ブランドの16進数の色をCSSで使用されている形式に変換します。 
:root {
  /* Using hex directly */
  --primary: #4f46e5;
  --primary-foreground: #ffffff;

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

​
丸い角

すべてのコンポーネントで丸みを帯びたスタイルにする場合： 
:root {
  --radius-lg: 16px; /* buttons, inputs */
  --radius-xl: 20px; /* cards */
  --radius-2xl: 24px; /* modals */
}

​
コンパクトタイポグラフィ

密度の高いUIの場合： 
:root {
  --font-size-page-header: 1.75rem;
  --font-size-heading: 1.25rem;
  --font-size-title: 1rem;
  --font-size-body: 0.875rem;
}

​
ダークモード

コンポーネントはthemeSettingsのmode設定に自動的に応答します。アプリのダークモードと同期させるには次のようにします： 
function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <Auth0ComponentProvider
      themeSettings={{
        mode: isDark ? "dark" : "light",
      }}
    >
      <YourApp />
    </Auth0ComponentProvider>
  );
}
または、システム設定を使用します： 
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

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