Auth0 Universal Componentsのスタイルとテーマをカスタマイズする

CSS変数、Tailwind v4、組み込みのテーマプリセットを使用して、Auth0 Universal Componentsをカスタマイズします。

Auth0 Universal Components は、Tailwind CSS と Radix UI のプリミティブを基盤とするデザインシステムで構築されています。コンポーネントが直接参照する CSS カスタムプロパティを設定することで、ブランドをカスタマイズできます。

以下から CSS の設定を選択してください。

プレーンCSS

​

設定

アプリのエントリーポイントで、プリコンパイル済みのスタイルシートをインポートします。

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

次に、CSS でトークンをオーバーライドします:

:root {
  --auth0-primary: #4f46e5;            /* ブランドカラー */
  --auth0-primary-foreground: #ffffff; /* プライマリ背景上のテキスト */
}

すべてのコンポーネントの色は、この2つのトークンから派生します。必要に応じて、CSS変数リファレンスから他の変数を追加してください。

プレーンCSSモードでは、--primary または --color-primary を設定しても反映されません。コンパイル済みのスタイルシートは、--auth0-* 変数を直接参照します。

---

​

テーマプリセット

Auth0ComponentProvider に themeSettings を渡すことで、組み込みのビジュアルバリアントを切り替えられます。

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

プリセット	説明
default	影と枠線のバランスが取れた標準的な Auth0 の外観
minimal	視覚的な重厚感を抑えたデザイン — 影を減らし、枠線を薄く
rounded	角丸を大きくし、より柔らかな印象に

シャドウ変数は、defaultプリセットでのみ有効です。minimalおよびroundedプリセットでは、シャドウが内部的に無効化されます。

---

​

CSS変数リファレンス

すべての視覚的なプロパティは CSS カスタムプロパティによって制御されます。上記の「設定」で示したようにスタイルシートで上書きするか、themeSettings.variables プロップを使って上書きしてください。

ライトモードのデフォルト値は :root で指定します。ダークモードの値には .dark または themeSettings.mode を使用してください。

色

:root {
  /* ブランド */
  --auth0-primary: oklch(37% 0 0);              /* ボタン、リンク、アクティブ状態 */
  --auth0-primary-foreground: oklch(100% 0 0);  /* プライマリ面上のテキスト */

  /* サーフェス */
  --auth0-background: oklch(100% 0 0);          /* ページの背景 */
  --auth0-foreground: oklch(9% 0 0);            /* デフォルトのテキスト */
  --auth0-card: oklch(100% 0 0);                /* カードの背景 */
  --auth0-card-foreground: oklch(0% 0 0);       /* カード内のテキスト */
  --auth0-popover: oklch(100% 0 0);             /* ドロップダウン／ダイアログの背景 */
  --auth0-popover-foreground: oklch(9% 0 0);    /* ポップオーバー内のテキスト */
  --auth0-input: oklch(100% 0 0);               /* 入力フィールドの背景 */

  /* セカンダリとミュート */
  --auth0-secondary: oklch(96% 0 0);
  --auth0-secondary-foreground: oklch(100% 0 0);
  --auth0-muted: oklch(96% 0 0);                /* 無効／控えめな背景 */
  --auth0-muted-foreground: oklch(45% 0 0);     /* プレースホルダーのテキスト */

  /* アクセントと破壊的操作 */
  --auth0-accent: oklch(97% 0 0);               /* ホバー時のハイライト */
  --auth0-accent-foreground: oklch(9% 0 0);
  --auth0-destructive: oklch(93% 0.03 17);      /* エラー状態 */
  --auth0-destructive-foreground: oklch(36% 0.14 17);

  /* ボーダー */
  --auth0-border: oklch(89% 0 0);
  --auth0-ring: oklch(89% 0 0);                 /* フォーカスリング */
}

ステータスカラー

ステータスカラーのトークンには接頭辞を付けず、--auth0-* カラーセットとは別に設定します。

トークン	設定対象
--color-page	ページレベルの背景 (最も外側のコンテナ)
--color-info	情報アラートの背景
--color-info-foreground	情報アラートのテキストとアイコン
--color-success	成功アラートの背景
--color-success-foreground	成功アラートのテキストとアイコン
--color-warning	警告アラートの背景
--color-warning-foreground	警告アラートのテキストとアイコン
--color-destructive-border	破壊的操作用の入力欄/ボタンの枠線
--color-popover-border	ポップオーバー/ドロップダウンの枠線
--color-input-foreground	入力テキストの色
--color-input-muted	ミュートされた入力バリアントの背景

:root または themeSettings.variables.light / .dark でオーバーライドします。

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

角の丸み

:root {
  /* 調整することが最も多い値 */
  --radius-sm:  4px;   /* タグ、チップ */
  --radius-md:  6px;   /* 小さな要素 */
  --radius-lg:  10px;  /* ボタン、入力欄 */
  --radius-xl:  12px;  /* カード */
  --radius-2xl: 16px;  /* モーダル、大きなパネル */

  /* 細かな調整用 */
  --radius-xs:  2px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-5xl: 32px;
  --radius-6xl: 40px;
  --radius-7xl: 48px;
  --radius-8xl: 56px;
  --radius-9xl: 64px;
}

タイポグラフィ

:root {
  --font-size-page-header:      2.25rem;   /* 36px — ページのメインタイトル */
  --font-size-heading:          1.5rem;    /* 24px — セクション見出し */
  --font-size-title:            1.25rem;   /* 20px — カードのタイトル */
  --font-size-subtitle:         1.125rem;  /* 18px — 副見出し */
  --font-size-body:             1rem;      /* 16px — 本文 */
  --font-size-paragraph:        0.875rem;  /* 14px — 説明文 */
  --font-size-label:            0.875rem;  /* 14px — フォームのラベル */
  --font-size-page-description: 0.875rem;  /* 14px — ページのサブタイトル */
}

---

​

JS API によるオーバーライド

プログラムから上書きするには、themeSettings.variables を Auth0ComponentProvider に渡します。この値は詳細度が最も高く、:root の CSS とスタイルシート内の値の両方を上書きします。

変数は次の3つのグループに分類されます。

• common — モードに関係なく適用されます (角丸、タイポグラフィ)
• light — mode: "light" のときに適用されます
• dark — 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 では、CSS の設定にかかわらず、カラートークンには常に --auth0-* という名前が使用されます。角丸とタイポグラフィのトークンには、それぞれ固有の名前 (--radius-*、--font-size-*) が使用されます。

---

​

コンポーネントごとのオーバーライド

すべてのコンポーネントは styling プロップを受け取り、グローバルスタイルに影響を与えることなく、オーバーライドの適用範囲を限定できます。

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

このコンポーネントにスコープが設定されたCSS tokenの上書きには variables を、コンポーネントの特定の部分に適用するTailwindクラスやカスタムクラスには classes を使用します。

コンポーネントごとに使用可能なクラスターゲット

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

---

​

よくあるカスタマイズ

​

ブランドカラー

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

​

丸みのある角

:root {
  --radius-lg: 16px;  /* ボタン、入力欄 */
  --radius-xl: 20px;  /* カード */
  --radius-2xl: 24px; /* モーダル */
}

​

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

:root {
  --font-size-page-header: 1.75rem;
  --font-size-heading: 1.25rem;
  --font-size-title: 1rem;
  --font-size-body: 0.875rem;
}

---

​

ダークモード

コンポーネントは themeSettings.mode に応じて表示が変わります。アプリのテーマ state と接続してください:

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

サーバーサイドレンダリングを使用する Next.js では、読み込み時のちらつきを防ぐため、優先モードを Cookie から読み取ります。

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

​

設定

Tailwind とコンポーネントのスタイルシートの両方を import します。

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

デザイントークンを定義し、@theme inline で Tailwind のユーティリティから利用できるようにします。

@theme inline {
  --color-primary: var(--color-primary);
  --color-primary-foreground: var(--color-primary-foreground);
  /* Tailwind ユーティリティで使用するその他のトークンを追加 */
}

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

Next.js: 同じパターンです。@import 行と @theme ブロックは globals.css に記述し、カラーオーバーライドは globals.css からインポートする light.css と dark.css に分けます。ルートの layout.tsx で globals.css をインポートします。

---

​

テーマプリセット

Auth0ComponentProvider に themeSettings を渡すことで、組み込みのビジュアルバリアントを切り替えられます。

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

プリセット	説明
default	シャドウと枠線のバランスが取れた標準的なAuth0の外観
minimal	視覚的な重みを抑えたデザイン — シャドウを減らし、枠線を細く
rounded	より柔らかな印象になるよう、角丸を大きく

シャドウ変数は、default プリセットでのみ有効になります。minimal および rounded プリセットでは、シャドウが内部的に無効化されます。

---

​

CSS変数リファレンス

視覚的なプロパティはすべてCSSカスタムプロパティによって制御されます。これらを上書きするには、スタイルシート内で指定する (上記の「設定」を参照) か、themeSettings.variables プロップを使用してください。

ライトモードのデフォルト値は :root に設定します。ダークモードの値には .dark または themeSettings.mode を使用してください。

色

:root {
  /* ブランド */
  --color-primary: oklch(37% 0 0);              /* ボタン、リンク、アクティブ状態 */
  --color-primary-foreground: oklch(100% 0 0);  /* プライマリ面上のテキスト */

  /* サーフェス */
  --color-background: oklch(100% 0 0);          /* ページの背景 */
  --color-foreground: oklch(9% 0 0);            /* デフォルトのテキスト */
  --color-card: oklch(100% 0 0);                /* カードの背景 */
  --color-card-foreground: oklch(0% 0 0);       /* カード内のテキスト */
  --color-popover: oklch(100% 0 0);             /* ドロップダウン／ダイアログの背景 */
  --color-popover-foreground: oklch(9% 0 0);    /* ポップオーバー内のテキスト */
  --color-input: oklch(100% 0 0);               /* 入力フィールドの背景 */

  /* セカンダリとミュート */
  --color-secondary: oklch(96% 0 0);
  --color-secondary-foreground: oklch(100% 0 0);
  --color-muted: oklch(96% 0 0);                /* 無効時／控えめな背景 */
  --color-muted-foreground: oklch(45% 0 0);     /* プレースホルダーのテキスト */

  /* アクセントと破壊的操作 */
  --color-accent: oklch(97% 0 0);               /* ホバー時のハイライト */
  --color-accent-foreground: oklch(9% 0 0);
  --color-destructive: oklch(93% 0.03 17);      /* エラー状態 */
  --color-destructive-foreground: oklch(36% 0.14 17);

  /* ボーダー */
  --color-border: oklch(89% 0 0);
  --color-ring: oklch(89% 0 0);                 /* フォーカスリング */
}

ステータスの色

ステータスカラーのトークンは、上記のブランドトークンと同じ --color-* 命名規則に従います。

トークン	制御対象
--color-page	ページ全体の背景 (最も外側のコンテナ)
--color-info	情報アラートの背景
--color-info-foreground	情報アラートのテキストとアイコン
--color-success	成功アラートの背景
--color-success-foreground	成功アラートのテキストとアイコン
--color-warning	警告アラートの背景
--color-warning-foreground	警告アラートのテキストとアイコン
--color-destructive-border	エラー状態の入力欄/ボタンの枠線
--color-popover-border	ポップオーバー/ドロップダウンの枠線
--color-input-foreground	入力テキストの色
--color-input-muted	控えめな入力バリアントの背景

:root 内、または themeSettings.variables.light / .dark でオーバーライドします。

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

角丸の半径

:root {
  /* 調整する機会が最も多い項目 */
  --radius-sm:  4px;   /* tags、チップ */
  --radius-md:  6px;   /* 小さな要素 */
  --radius-lg:  10px;  /* ボタン、入力欄 */
  --radius-xl:  12px;  /* カード */
  --radius-2xl: 16px;  /* modal、大きな panel */

  /* fine-grained な調整用 */
  --radius-xs:  2px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-5xl: 32px;
  --radius-6xl: 40px;
  --radius-7xl: 48px;
  --radius-8xl: 56px;
  --radius-9xl: 64px;
}

タイポグラフィ

:root {
  --font-size-page-header:      2.25rem;   /* 36px — ページのメインタイトル */
  --font-size-heading:          1.5rem;    /* 24px — セクション見出し */
  --font-size-title:            1.25rem;   /* 20px — カードのタイトル */
  --font-size-subtitle:         1.125rem;  /* 18px — サブ見出し */
  --font-size-body:             1rem;      /* 16px — 本文 */
  --font-size-paragraph:        0.875rem;  /* 14px — 説明文 */
  --font-size-label:            0.875rem;  /* 14px — フォームのラベル */
  --font-size-page-description: 0.875rem;  /* 14px — ページのサブタイトル */
}

---

​

JS API によるオーバーライド

プログラムによる上書きを行うには、themeSettings.variables を Auth0ComponentProvider に渡します。これらは詳細度が最も高く、:root の CSS とスタイルシートの値の両方を上書きします。

変数は次の3つのバケットに分類されます。

• common — モードにかかわらず適用 (角丸、タイポグラフィ)
• light — mode: "light" のときに適用
• dark — mode: "dark" のときに適用

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

---

​

コンポーネントごとのオーバーライド

すべてのコンポーネントは styling プロップを受け取り、グローバルスタイルに影響を与えることなく、オーバーライドの適用範囲を限定できます。

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

このコンポーネントにスコープが設定されたCSSトークンのオーバーライドにはvariablesを、コンポーネントの特定の部分に適用するTailwindクラスやカスタムクラスにはclassesを使用します。

コンポーネントごとに利用可能なクラスターゲット

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

---

​

よくあるカスタマイズ

​

ブランドカラー

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

​

丸みのある角

:root {
  --radius-lg: 16px;  /* ボタン、入力欄 */
  --radius-xl: 20px;  /* カード */
  --radius-2xl: 24px; /* モーダル */
}

​

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

:root {
  --font-size-page-header: 1.75rem;
  --font-size-heading: 1.25rem;
  --font-size-title: 1rem;
  --font-size-body: 0.875rem;
}

---

​

ダークモード

コンポーネントは themeSettings.mode に応じて表示が変わります。アプリのテーマ state と連携させてください:

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

サーバーサイドレンダリングを使用する Next.js では、読み込み時のちらつきを防ぐために、優先モードを Cookie から読み取ります。

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