> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Web での Organization メンバー管理

> タブ形式のインターフェースで org のメンバーと保留中の招待を管理し、招待のライフサイクル全体を制御できます。

> [!WARNING]
>
> **Auth0 Universal Components機能は現在、です。**

`OrganizationMemberManagement` コンポーネントは、[organization](https://auth0.com/docs/ja-jp/manage-users/organizations.md) のメンバーと招待を一元的に管理するためのインターフェースを提供します。

読み込み中

Organization Member Management コンポーネントのプレビュー

> [tab] React
>
> ## セットアップ要件
>
> **Auth0の設定が必要です**—テナントでMy Organization APIが設定されていることを確認してください。[セットアップガイドを見る →](https://auth0.com/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin.md#configure-auth0-dashboard)
>
> ## インストール
>
> ```bash pnpm wrap lines theme={null}
> pnpm add @auth0/universal-components-react
> ```
>
> ## はじめに
>
> ```tsx wrap lines theme={null}
> import { OrganizationMemberManagement } from "@auth0/universal-components-react";
>
> export function MembersPage() {
>   return <OrganizationMemberManagement />;
> }
> ```
>
> 管理者が個々のメンバーを表示できるようにするには、`viewMemberDetailsAction` に [`OrganizationMemberDetail`](https://auth0.com/docs/ja-jp/get-started/universal-components/web/components/organization-member-detail) を配置したルートへ遷移する処理を設定します。
>
> ```tsx wrap lines theme={null}
> import { OrganizationMemberManagement } from "@auth0/universal-components-react";
> import { useNavigate } from "react-router-dom";
>
> export function MembersPage() {
>   const navigate = useNavigate();
>
>   return (
>     <OrganizationMemberManagement
>       viewMemberDetailsAction={{
>         onAfter: ({ userId, tab }) =>
>           navigate(tab ? `/members/${userId}?tab=${tab}` : `/members/${userId}`),
>       }}
>     />
>   );
> }
> ```
>
> > [accordion] 統合の完全な例
> >
> > ```tsx lines theme={null}
> > import React from "react";
> > import { useNavigate } from "react-router-dom";
> > import { OrganizationMemberManagement } from "@auth0/universal-components-react";
> > import { Auth0Provider } from "@auth0/auth0-react";
> > import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
> > import { auditLog } from "./lib/audit-log";
> >
> > function MembersPage() {
> >   const navigate = useNavigate();
> >
> >   return (
> >     <div className="max-w-5xl mx-auto p-6">
> >       <OrganizationMemberManagement
> >         createInvitationAction={{
> >           onBefore: (input) => {
> >             const email = input.invitees[0]?.email ?? "";
> >             return email.endsWith("@example.com");
> >           },
> >           onAfter: (input, createdInvitation) => {
> >             auditLog.record({
> >               action: "invitation_created",
> >               email: input.invitees[0]?.email,
> >               invitationId: createdInvitation.id,
> >             });
> >           },
> >         }}
> >         revokeInvitationAction={{
> >           onBefore: (invitations) =>
> >             window.confirm(`Revoke ${invitations.length} invitation(s)?`),
> >           onAfter: (invitations) => {
> >             auditLog.record({
> >               action: "invitations_revoked",
> >               count: invitations.length,
> >             });
> >           },
> >         }}
> >         resendInvitationAction={{
> >           onAfter: (original, newInvitation) => {
> >             auditLog.record({
> >               action: "invitation_resent",
> >               originalId: original.id,
> >               newId: newInvitation.id,
> >             });
> >           },
> >         }}
> >         viewMemberDetailsAction={{
> >           onAfter: ({ userId, tab }) =>
> >             navigate(tab ? `/members/${userId}?tab=${tab}` : `/members/${userId}`),
> >         }}
> >         removeFromOrganizationAction={{
> >           onBefore: (userId) =>
> >             window.confirm(`Remove member ${userId} from the organization?`),
> >           onAfter: (userId) => {
> >             auditLog.record({ action: "member_removed", userId });
> >           },
> >         }}
> >         assignRolesAction={{
> >           onAfter: ({ userId, roleIds }) => {
> >             auditLog.record({ action: "roles_assigned", userId, roleIds });
> >           },
> >         }}
> >         customMessages={{
> >           header: { title: "Team Members" },
> >           tabs: { invitations: "Pending Invites" },
> >         }}
> >         styling={{
> >           variables: {
> >             light: { "--color-primary": "#4f46e5" },
> >             dark: { "--color-primary": "#818cf8" },
> >           },
> >         }}
> >       />
> >     </div>
> >   );
> > }
> >
> > export default function App() {
> >   const domain = "YOUR_TENANT.auth0.com";
> >   const clientId = "YOUR_CLIENT_ID";
> >
> >   return (
> >     <Auth0Provider
> >       domain={domain}
> >       clientId={clientId}
> >       authorizationParams={{ redirect_uri: window.location.origin }}
> >     >
> >       <Auth0ComponentProvider>
> >         <MembersPage />
> >       </Auth0ComponentProvider>
> >     </Auth0Provider>
> >   );
> > }
> > ```

> [tab] Next.js
>
> ## セットアップ要件
>
> **Auth0の設定が必要です**—テナントでMy Organization APIが設定されていることを確認してください。[セットアップガイドを見る →](https://auth0.com/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin.md#configure-auth0-dashboard)
>
> ## インストール
>
> ```bash pnpm wrap lines theme={null}
> pnpm add @auth0/universal-components-react
> ```
>
> ## はじめに
>
> ```tsx wrap lines theme={null}
> // app/members/page.tsx
> "use client";
>
> import { OrganizationMemberManagement } from "@auth0/universal-components-react";
>
> export default function MembersPage() {
>   return <OrganizationMemberManagement />;
> }
> ```
>
> > [accordion] 統合の完全な例
> >
> > ```tsx lines theme={null}
> > // app/layout.tsx
> > import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";
> >
> > export default function RootLayout({ children }: { children: React.ReactNode }) {
> >   return (
> >     <html lang="en">
> >       <body>
> >         <Auth0ComponentProvider
> >           mode="proxy"
> >           domain="YOUR_TENANT.auth0.com"
> >           proxyConfig={{ baseUrl: "/api/auth" }}
> >         >
> >           {children}
> >         </Auth0ComponentProvider>
> >       </body>
> >     </html>
> >   );
> > }
> > ```
> >
> > ```tsx lines theme={null}
> > // app/members/page.tsx
> > "use client";
> >
> > import React from "react";
> > import { OrganizationMemberManagement } from "@auth0/universal-components-react";
> > import { useRouter } from "next/navigation";
> > import { auditLog } from "@/lib/audit-log";
> >
> > export default function MembersPage() {
> >   const router = useRouter();
> >
> >   return (
> >     <div className="max-w-5xl mx-auto p-6">
> >       <OrganizationMemberManagement
> >         createInvitationAction={{
> >           onBefore: (input) => {
> >             const email = input.invitees[0]?.email ?? "";
> >             return email.endsWith("@example.com");
> >           },
> >           onAfter: (input, createdInvitation) => {
> >             auditLog.record({
> >               action: "invitation_created",
> >               email: input.invitees[0]?.email,
> >               invitationId: createdInvitation.id,
> >             });
> >           },
> >         }}
> >         viewMemberDetailsAction={{
> >           onAfter: ({ userId, tab }) =>
> >             router.push(tab ? `/members/${userId}?tab=${tab}` : `/members/${userId}`),
> >         }}
> >         removeFromOrganizationAction={{
> >           onBefore: (userId) =>
> >             window.confirm(`Remove member ${userId} from the organization?`),
> >           onAfter: (userId) => {
> >             auditLog.record({ action: "member_removed", userId });
> >             router.refresh();
> >           },
> >         }}
> >         assignRolesAction={{
> >           onAfter: ({ userId, roleIds }) => {
> >             auditLog.record({ action: "roles_assigned", userId, roleIds });
> >           },
> >         }}
> >         customMessages={{ header: { title: "Team Members" } }}
> >         styling={{
> >           variables: {
> >             light: { "--color-primary": "#4f46e5" },
> >             dark: { "--color-primary": "#818cf8" },
> >           },
> >         }}
> >       />
> >     </div>
> >   );
> > }
> > ```

> [tab] shadcn
>
> ## セットアップ要件
>
> **Auth0の設定が必要です**—テナントでMy Organization APIが設定されていることを確認してください。[セットアップガイドを見る →](https://auth0.com/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin.md#configure-auth0-dashboard)
>
> ## インストール
>
> GitHub Registryを使用し、shadcn CLIでコンポーネントをインストールします。
>
> ```bash wrap lines theme={null}
> npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/organization-member-management
> ```
>
> これにより、React コンポーネントのソースコードが `src/components/auth0/my-organization/` にインストールされ、併せて依存関係と `@auth0/universal-components-core` もインストールされます。
>
> ## はじめに
>
> ```tsx wrap lines theme={null}
> import { OrganizationMemberManagement } from "@/components/auth0/my-organization/organization-member-management";
>
> export function MembersPage() {
>   return <OrganizationMemberManagement />;
> }
> ```
>
> > [accordion] 統合の完全な例
> >
> > ```tsx lines theme={null}
> > import React from "react";
> > import { OrganizationMemberManagement } from "@/components/auth0/my-organization/organization-member-management";
> > import { Auth0Provider } from "@auth0/auth0-react";
> > import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
> > import { useNavigate } from "react-router-dom";
> > import { auditLog } from "./lib/audit-log";
> >
> > function MembersPage() {
> >   const navigate = useNavigate();
> >
> >   return (
> >     <OrganizationMemberManagement
> >       createInvitationAction={{
> >         onBefore: (input) => {
> >           const email = input.invitees[0]?.email ?? "";
> >           return email.endsWith("@example.com");
> >         },
> >         onAfter: (input, createdInvitation) => {
> >           auditLog.record({
> >             action: "invitation_created",
> >             email: input.invitees[0]?.email,
> >             invitationId: createdInvitation.id,
> >           });
> >         },
> >       }}
> >       viewMemberDetailsAction={{
> >         onAfter: ({ userId, tab }) =>
> >           navigate(tab ? `/members/${userId}?tab=${tab}` : `/members/${userId}`),
> >       }}
> >       removeFromOrganizationAction={{
> >         onBefore: (userId) =>
> >           window.confirm(`Remove member ${userId} from the organization?`),
> >         onAfter: (userId) => {
> >           auditLog.record({ action: "member_removed", userId });
> >           navigate("/members");
> >         },
> >       }}
> >       assignRolesAction={{
> >         onAfter: ({ userId, roleIds }) => {
> >           auditLog.record({ action: "roles_assigned", userId, roleIds });
> >         },
> >       }}
> >       customMessages={{ header: { title: "Team Members" } }}
> >       styling={{
> >         variables: {
> >           light: { "--color-primary": "#4f46e5" },
> >           dark: { "--color-primary": "#818cf8" },
> >         },
> >       }}
> >     />
> >   );
> > }
> >
> > export default function App() {
> >   const domain = "YOUR_TENANT.auth0.com";
> >   const clientId = "YOUR_CLIENT_ID";
> >
> >   return (
> >     <Auth0Provider
> >       domain={domain}
> >       clientId={clientId}
> >       authorizationParams={{ redirect_uri: window.location.origin }}
> >     >
> >       <Auth0ComponentProvider>
> >         <MembersPage />
> >       </Auth0ComponentProvider>
> >     </Auth0Provider>
> >   );
> > }
> > ```

## プロップ

### 表示プロップ

表示プロップは、コンポーネントの動作に影響を与えずに、表示方法を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりする場合に使用します。

| プロップ | 型 | 説明 |
| :- | :- | :- |
| `hideHeader` | `boolean` | コンポーネントのヘッダーセクション (タイトルと説明) を非表示にします。デフォルト: `false` |
| `readOnly` | `boolean` | すべての変更アクション (招待、取り消し、再送信、削除、割り当て) を無効にします。デフォルト: `false` |

***

### アクションプロップ

アクションプロップはユーザー操作を処理し、メンバーや招待に関する操作を行った際の動作を定義します。ライフサイクルフック (`onBefore`、`onAfter`) を使用して、アプリケーションのルーティングや分析と連携できます。

| プロップ | 型 | 説明 |
| :- | :- | :- |
| `createInvitationAction` | `ComponentAction<CreateInvitationInput, MemberInvitation>` | メンバーを招待するアクション。 |
| `revokeInvitationAction` | `ComponentAction<MemberInvitation[]>` | 招待を取り消すアクション。 |
| `resendInvitationAction` | `ComponentAction<MemberInvitation, MemberInvitation>` | 招待を再送するアクション。 |
| `viewMemberDetailsAction` | `ComponentAction<ViewMemberDetailsParams>` | メンバーの詳細を表示するアクション。 |
| `removeFromOrganizationAction` | `ComponentAction<string>` | メンバーを削除するアクション。 |
| `assignRolesAction` | `ComponentAction` | ロールを割り当てるアクション。フックは `{ userId, roleIds }` を受け取ります。 |

**createInvitationAction**

**型:** `ComponentAction<CreateInvitationInput, MemberInvitation>`

招待の作成を制御します (1回のリクエストで最大10人まで招待可能) 。

* `onBefore(input)` は送信前に同期的に実行されます。キャンセルするには `false` を返します。
* `onAfter(input, createdInvitation)` は招待の作成後に実行されます。

```tsx wrap lines theme={null}
<OrganizationMemberManagement
  createInvitationAction={{
    onBefore: (input) => {
      const email = input.invitees[0]?.email ?? "";
      return email.endsWith("@example.com");
    },
    onAfter: (input, createdInvitation) => {
      auditLog.record({
        action: "invitation_created",
        email: input.invitees[0]?.email,
        invitationId: createdInvitation.id,
      });
    },
  }}
/>
```

**招待の接続ルーティング**

招待ピッカーには、対象となるエンタープライズ SSO IDプロバイダーと、その Organization に設定され有効化されているユーザーストア / ユーザーディレクトリが一覧表示されます。

接続セレクターは、次の両方のソースに問い合わせます。

* `GET /my-org/identity-providers` (対象となるメンバーのアクセスレベルで絞り込み)
* `GET /my-org/user-stores` (`is_enabled: true` で絞り込み)

```ts theme={null}
type ConnectionOptionType = 'identity_provider' | 'user_store';

interface ConnectionOption {
  id: string;
  name: string;
  type: ConnectionOptionType;
}
```

`createInvitationAction` に送信されるペイロードでは、選択した接続の種類に応じて、該当する識別子が 1 つだけ使用されます。

* **エンタープライズ SSO 接続を選択した場合:** ペイロードに `identity_provider_id` が設定されます。
* **ユーザーストア / Directory 接続を選択した場合:** ペイロードに `user_store_id` が設定されます。

```ts theme={null}
interface CreateInvitationInput {
  invitees: Array<{
    email: string;
    roles?: string[];
  }>;
  inviter?: {
    name?: string;
  };
  identity_provider_id?: string;
  user_store_id?: string;
  ttl_sec?: number;
}
```

接続のルーティングルール:

* **自動選択:** 組織に対象となる接続が1つしかない場合、その接続が既定で選択されますが、編集は可能です。
* **接続がない場合:** 対象となる接続が存在しない場合、招待のエントリポイントは無効になり、その理由を説明するフィードバックが表示されます。
* **取り消しと再送信:** 取り消しと再送信のフローでは、元の接続ルーティング元 (`user_store_id` または `identity_provider_id`) が保持されます。
* **接続の対象条件:** 招待のピッカーには、メンバーアクセスレベルが `limited` または `full` に設定された接続が表示されます。

**revokeInvitationAction**

**型:** `ComponentAction<MemberInvitation[]>`

招待の取り消しを制御します (単一および一括の取り消しに対応し、1バッチあたり最大10件まで取り消せます) 。

* `onBefore(invitations)` は取り消し前に確認を行います。キャンセルする場合は `false` を返します。
* `onAfter(invitations)` は招待が取り消された後に実行されます。

```tsx wrap lines theme={null}
<OrganizationMemberManagement
  revokeInvitationAction={{
    onBefore: (invitations) =>
      window.confirm(`Revoke ${invitations.length} invitation(s)?`),
    onAfter: (invitations) => {
      auditLog.record({
        action: "invitations_revoked",
        count: invitations.length,
      });
    },
  }}
/>
```

**resendInvitationAction**

**型:** `ComponentAction<MemberInvitation, MemberInvitation>`

招待の取り消しと再送信のフローを制御します。

* `onBefore(invitation)` は再送信前に確認を行います。中止するには `false` を返します。
* `onAfter(original, newInvitation)` は新しい招待が作成された後に実行されます。

```tsx wrap lines theme={null}
<OrganizationMemberManagement
  resendInvitationAction={{
    onAfter: (original, newInvitation) => {
      auditLog.record({
        action: "invitation_resent",
        originalId: original.id,
        newId: newInvitation.id,
      });
    },
  }}
/>
```

**viewMemberDetailsAction**

**型:** `ComponentAction<ViewMemberDetailsParams>`

メンバー行またはロールバッジを選択したときに発火します。`{ userId, tab }` を受け取ります。これをフックして `OrganizationMemberDetail` へ遷移させます。

* `onAfter({ userId, tab })` は選択時に実行されます。指定されたタブを直接開けるよう、ルーターの URL に `tab` を保持してください。

```tsx wrap lines theme={null}
<OrganizationMemberManagement
  viewMemberDetailsAction={{
    onAfter: ({ userId, tab }) =>
      navigate(tab ? `/members/${userId}?tab=${tab}` : `/members/${userId}`),
  }}
/>
```

**removeFromOrganizationAction**

**型:** `ComponentAction<string>`

Organization からのメンバー削除を制御します (対象はメンバーシップのみで、Auth0 のユーザーストアからユーザープロファイルが削除されるわけではありません) 。どちらのフックも `userId` を受け取ります。

* `onBefore(userId)` は削除前に確認を行います。キャンセルするには `false` を返します。
* `onAfter(userId)` は削除後に実行されます。

```tsx wrap lines theme={null}
<OrganizationMemberManagement
  removeFromOrganizationAction={{
    onBefore: (userId) =>
      window.confirm(`Remove member ${userId} from the organization?`),
    onAfter: (userId) => {
      auditLog.record({ action: "member_removed", userId });
    },
  }}
/>
```

**assignRolesAction**

**型:** `ComponentAction<{ userId: string; roleIds: string[] }>`

行モーダルからロールを割り当てた後に発火します。選択できるロールは1回の割り当てリクエストあたり10個までで、1人のメンバーに割り当てられるロールは合計50個までです。どちらのフックも `{ userId, roleIds }` を受け取ります。

* `onBefore({ userId, roleIds })` は選択内容を検証します。キャンセルするには `false` を返します。
* `onAfter({ userId, roleIds })` はロールの割り当て後に実行されます。

```tsx wrap lines theme={null}
<OrganizationMemberManagement
  assignRolesAction={{
    onAfter: ({ userId, roleIds }) => {
      auditLog.record({ action: "roles_assigned", userId, roleIds });
    },
  }}
/>
```

***

### カスタマイズ用プロップ

| プロップ | 型 | 説明 |
| :- | :- | :- |
| `customMessages` | `Partial<OrganizationMemberManagementMessages>` | 文言およびテキストの上書き。 |
| `styling` | `ComponentStyling<OrganizationMemberManagementClasses>` | CSS変数およびクラスのオーバーライド。 |

**customMessages**

コンポーネントに同梱されたテキストを上書きします。すべてのフィールドは省略可能で、省略した場合は組み込みの既定値が使用されます。

> [accordion] 主なメッセージグループ
>
> **header**—コンポーネントのヘッダー
>
> * `title`、`description`
>
> **tabs**—タブのラベル
>
> * `members`、`invitations`
>
> **count\_capped**—上限到達時の件数表示
>
> * メンバー数または招待数が1,000件を超えた場合に表示されるテキスト
>
> **member.table**—メンバーテーブルの表示
>
> * `columns.name`、`columns.roles`、`columns.last_login`
> * `empty_message`、`search_placeholder`
>
> **member.actions**—メンバー行のアクション
>
> * `menu_label`、`remove_from_organization`、`view_details`
>
> **member.assign\_roles**—ロール割り当てモーダル
>
> * `title`、`description`
> * `roles_label`、`roles_placeholder`
> * `submit_button`、`cancel_button`、`no_roles_available`
>
> **member.remove\_from\_organization**—メンバー削除の確認
>
> * `title`、`description`
> * `confirm_button`、`cancel_button`
>
> **member.success / member.error**—メンバー操作のステータス
>
> * `success.removed_from_organization`、`success.role_assigned`
> * `error.fetch_failed`、`error.assign_roles_failed`、`error.remove_from_organization_failed`
>
> **invitation.table**—招待テーブルの表示
>
> * `columns.email`、`columns.status`、`columns.inviter`
> * `columns.created_at`、`columns.expires_at`、`columns.roles`
> * `empty_message`、`search_placeholder`、`showing_results`
> * `status_pending`、`status_expired`
>
> **invitation.actions**—招待行のアクション
>
> * `menu_label`、`view_details`、`copy_url`、`revoke_and_resend`、`revoke`
>
> **invitation.create**—招待作成モーダル
>
> * `title`、`description`
> * `email_label`、`email_placeholder`、`email_helper`
> * `email_limit_error`、`email_invalid_error`、`email_duplicate_error`、`email_required_error`
> * `roles_label`、`roles_placeholder`、`roles_max_selection_message`、`roles_searching_message`
> * `connection_label`、`connection_placeholder`、`connection_helper`
> * `connection_group_user_store`、`connection_group_identity_provider`
> * `submit_button`、`creating`、`cancel_button`
>
> **invitation.details**—招待の詳細ドロワー
>
> * `title`、`email_label`、`status_label`
> * `roles_label`、`connection_label`
> * `created_at_label`、`expires_at_label`、`invited_by_label`、`invitation_url_label`
> * `copy_url_button`、`close_button`、`revoke_button`、`resend_button`
>
> **invitation.revoke / invitation.revoke\_resend**—取り消しの確認
>
> * `revoke.title`、`revoke.description`、`revoke.confirm_button`、`revoke.cancel_button`
> * `revoke_resend.title`、`revoke_resend.description`、`revoke_resend.confirm_button`、`revoke_resend.cancel_button`
>
> **invitation.bulk\_revoke**—一括取り消しの確認
>
> * `button`、`button_plural`、`count`、`count_plural`、`success`、`max_selection_message`
> * `confirm.title`、`confirm.title_plural`、`confirm.description`、`confirm.description_plural`
> * `confirm.confirm_button`、`confirm.confirm_button_plural`、`confirm.cancel_button`
>
> **invitation.error / invitation.success**—招待のステータスおよびアラート
>
> * `success.url_copied`、`success.invitation_resent`
> * `error.fetch_failed`、`error.fetch_roles_failed`、`error.create_failed`
> * `error.revoke_failed`、`error.resend_failed`、`error.revoke_resend_failed`
> * `error.bulk_revoke_failed`、`error.connection_required`、`error.copy_url_failed`

```tsx wrap lines theme={null}
<OrganizationMemberManagement
  customMessages={{
    header: {
      title: "Team Members",
      description: "Manage who has access to your organization",
    },
    tabs: { members: "Members", invitations: "Pending Invites" },
    member: {
      table: {
        empty_message: "No members yet.",
        search_placeholder: "Search by name or email...",
      },
      actions: {
        remove_from_organization: "Remove",
      },
    },
    invitation: {
      table: { empty_message: "No pending invitations." },
      create: { title: "Invite a team member", submit_button: "Send Invite" },
    },
  }}
/>
```

***

**styling**

CSS変数とクラスのオーバーライドで外観をカスタマイズします。変数は `light`、`dark`、`common` のスコープに対応しています。クラスのオーバーライドは、コンポーネントツリー内の名前付きスロットに適用されます。

> [accordion] 利用可能なスタイル設定オプション
>
> **Variables**—CSSカスタムプロパティ
>
> * `common`—すべてのテーマに適用
> * `light`—ライトテーマのみ
> * `dark`—ダークテーマのみ
>
> **Classes**—対象要素へのクラスのオーバーライド
>
> * `OrganizationMemberManagement-root`
> * `OrganizationMemberManagement-header`
> * `OrganizationMemberManagement-tabs`
> * `OrganizationInvitationTab-root`
> * `OrganizationInvitationTab-table`
> * `OrganizationInvitationTab-createModal`
> * `OrganizationInvitationTab-detailsModal`
> * `OrganizationInvitationTab-revokeModal`
> * `OrganizationInvitationTab-revokeResendModal`
> * `OrganizationInvitationTab-bulkRevokeModal`
> * `OrganizationInvitationTab-searchInput`
> * `OrganizationInvitationTab-filterDropdown`
> * `OrganizationInvitationTab-pagination`

```tsx wrap lines theme={null}
<OrganizationMemberManagement
  styling={{
    variables: {
      light: { "--color-primary": "#4f46e5" },
      dark: { "--color-primary": "#818cf8" },
    },
    classes: {
      "OrganizationMemberManagement-root": "rounded-xl border shadow-sm",
      "OrganizationMemberManagement-header": "mb-4",
      "OrganizationInvitationTab-table": "mt-4",
    },
  }}
/>
```

***

## 高度なカスタマイズ

### 利用可能なフック

これらのフックは、UIを含まない基盤となるロジックのみを提供します。Auth0 APIとの連携を活用しながら、完全に独自のインターフェースを構築したい場合にご利用ください。

| フック | 説明 |
| :- | :- |
| `useOrganizationMemberManagement` | メンバーと招待のデータ、タブおよびページネーションの状態、モーダルの状態、操作用のハンドラー。 |