メインコンテンツへスキップ
Auth0 Universal Components は現在 EA です。これを使用すると、Okta の Master Subscription Agreement に定められた該当する Free Trial 条項に 同意したものとみなされます。詳しくは、Product Release Stages を参照してください。
Auth0 Universal Components は、Tailwind CSS と Radix UI primitives を活用した柔軟なデザインシステムを基盤としています。スタイル設定は Auth0ComponentProvider を通じて行われ、上位レベルのプリセットを使用することも、CSS 変数を細かく上書きすることもできます。 このアーキテクチャにより、ID フローのルック＆フィールをアプリケーションに自然に溶け込ませることができます。

​
はじめに

  1. スタイルシートをインポートします。
import "@auth0/universal-components-react/styles";
Tailwind v4 ユーザー: CSS ファイルに @import "@auth0/universal-components-react/tailwind" を追加します。
  1. ブランドカラーを追加する。
:root {
  --primary: #4f46e5; /* ブランドカラー */
  --primary-foreground: #ffffff; /* ボタンのテキスト */
}
完了しました。すべてのボタン、リンク、アクティブ状態にブランドが適用されました。

​
テーマプリセット

themeSettings を Auth0ComponentProvider に渡して、組み込みテーマを切り替えます。
App.tsx
<Auth0ComponentProvider
  themeSettings={{
    mode: "light", // 'light' | 'dark'
    theme: "default", // 'default' | 'minimal' | 'rounded'
  }}
>
  <App />
</Auth0ComponentProvider>
プリセット説明
defaultシャドウとボーダーのバランスが取れた、標準的な Auth0 の外観
minimalシャドウを抑え、ボーダーを控えめにした軽量なスタイル
rounded角丸を大きくして、より柔らかな印象にしたスタイル

​
CSS変数の確認

すべての視覚的プロパティはCSSカスタムプロパティで制御されます。スタイルシートまたは themeSettings.variables プロパティでオーバーライドできます。
:root {
  /* ブランド - 最も影響力のある変数 */
  --primary: oklch(37% 0 0);              /* ボタン、リンク、アクティブ状態 */
  --primary-foreground: oklch(100% 0 0);  /* プライマリサーフェス上のテキスト */

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

/_ セカンダリ & ミュート _/
--secondary: oklch(96% 0 0);
--secondary-foreground: oklch(100% 0 0);
--muted: oklch(96% 0 0); /_ 無効状態の背景 _/
--muted-foreground: oklch(45% 0 0); /_ プレースホルダーテキスト _/

/_ アクセント & 破壊的アクション _/
--accent: oklch(97% 0 0); /_ ホバーハイライト _/
--accent-foreground: oklch(9% 0 0);
--destructive: oklch(93% 0.03 17); /_ エラー状態 _/
--destructive-foreground: oklch(36% 0.14 17);

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

​
スタイルコンポーネント

すべてのコンポーネントは、グローバルスタイルに影響を与えずに特定のスタイルを上書きするための styling プロパティを受け付けます。
<SsoProviderTable
  styling={{
    variables: {
      common: {
        "--primary": "#059669", // このコンポーネントのみオーバーライド
      },
      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 {
  /* 16進数を直接使用する */
  --primary: #4f46e5;
  --primary-foreground: #ffffff;

  /* または、より柔軟な色操作のためにoklchを使用する */
  --primary: oklch(50% 0.2 265); /* 紫 */
}

​
ソフトコーナー

すべてのコンポーネントに丸みのあるデザインを適用するには：
:root {
  --radius-lg: 16px; /* ボタン、入力欄 */
  --radius-xl: 20px; /* カード */
  --radius-2xl: 24px; /* モーダル */
}

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

よりコンパクトな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' }}
>