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

# Manage Organization Members on Web

> Manage organization members and pending invitations in a tabbed interface with full invitation lifecycle controls.

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "Early Access"
  };
  const stageText = stageTextMap[stage] || "a product release stage";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>This feature is available for {linkify(`${plans} plans`, "https://auth0.com/pricing")}. </>}
            {contact && "To participate, contact " + contact + ". "}
            {terms && <>By using this feature, you agree to the applicable Free Trial terms in Okta's {linkify("Master Subscription Agreement", "https://www.okta.com/legal")}.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>The {feature} feature is in {linkify(stageText, prsLink)}.</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

export const ComponentLoader = props => {
  const detectTheme = () => {
    if (typeof document === "undefined") return "light";
    const html = document.documentElement;
    const colorScheme = html.style.colorScheme || window.getComputedStyle(html).colorScheme;
    if (colorScheme) return colorScheme === "dark" ? "dark" : "light";
    const isDarkMode = window?.localStorage?.getItem?.("isDarkMode");
    const prefersDark = window.matchMedia?.("(prefers-color-scheme: dark)").matches;
    const shouldBeDark = isDarkMode === "dark" || isDarkMode !== "light" && prefersDark;
    return shouldBeDark ? "dark" : "light";
  };
  const [theme, setTheme] = useState(detectTheme);
  useEffect(() => {
    if (typeof document === "undefined") return;
    setTheme(detectTheme());
    const observer = new MutationObserver(() => setTheme(detectTheme()));
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["style", "class", "data-theme", "data-theme-preference"]
    });
    return () => observer.disconnect();
  }, []);
  const lang = {
    i18n: {
      currentLanguage: props.lang || "en-US"
    }
  };
  return <div style={{
    minHeight: "400px",
    marginTop: "40px",
    background: theme === "light" ? "rgb(var(--gray-950)/.03)" : "rgb(255 255 255/.1)",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    backgroundSize: "16px 16px",
    borderRadius: "10px",
    boxShadow: "0 1px 4px 0 rgba(16,30,54,0.04)",
    display: "flex",
    flexDirection: "column"
  }}>
      <div style={{
    minWidth: "320px",
    width: "96.5%",
    maxWidth: "1200px",
    margin: "12px 12px 0",
    background: theme === "light" ? "#ffffff" : "#101011",
    borderRadius: "10px",
    boxShadow: "0 2px 8px 0 rgba(16,30,54,0.04)",
    padding: "24px",
    minHeight: "400px"
  }} data-uc-component={props.componentSelector} data-uc-props={JSON.stringify(lang)}>
        <div aria-label="Loading" role="status" style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }}>
          <svg width={40} height={40} viewBox="0 0 50 50" style={{
    display: "block"
  }}>
            <circle cx="25" cy="25" r="20" fill="none" stroke="#8A94A6" strokeWidth="5" strokeDasharray="90 150" strokeLinecap="round">
              <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
            </circle>
          </svg>
        </div>
      </div>
      <div style={{
    width: "100%",
    textAlign: "center",
    color: theme === "light" ? "#6B7280" : "#ffffff",
    fontSize: "12px",
    marginTop: "8px",
    marginBottom: "8px",
    letterSpacing: "0.01em",
    fontWeight: 400
  }}>
        {props.componentPreviewText}
      </div>
    </div>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="ea" terms="true" contact="Auth0 Support" />

The `OrganizationMemberManagement` component provides a unified interface to manage members and invitations for your [organization](/docs/manage-users/organizations).

<ComponentLoader componentSelector="organization-member-management" componentPreviewText="Preview of the Organization Member Management component" />

<Tabs>
  <Tab title="React">
    ## Setup requirements

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration Required**—Ensure your tenant is configured with the My Organization API. [View setup guide →](/docs/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    ## Installation

    ```bash pnpm wrap lines theme={null}
    pnpm add @auth0/universal-components-react
    ```

    ## Get started

    ```tsx wrap lines theme={null}
    import { OrganizationMemberManagement } from "@auth0/universal-components-react";

    export function MembersPage() {
      return <OrganizationMemberManagement />;
    }
    ```

    To let administrators view an individual member, wire `viewMemberDetailsAction` to navigate to the route hosting [`OrganizationMemberDetail`](/docs/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 title="Full integration example">
      ```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>
        );
      }
      ```
    </Accordion>
  </Tab>

  <Tab title="Next.js">
    ## Setup requirements

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration Required**—Ensure your tenant is configured with the My Organization API. [View setup guide →](/docs/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    ## Installation

    ```bash pnpm wrap lines theme={null}
    pnpm add @auth0/universal-components-react
    ```

    ## Get started

    ```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 title="Full integration example">
      ```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>
        );
      }
      ```
    </Accordion>
  </Tab>

  <Tab title="shadcn">
    ## Setup requirements

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration Required**—Ensure your tenant is configured with the My Organization API. [View setup guide →](/docs/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    ## Installation

    Install the component via the shadcn CLI using the GitHub Registry:

    ```bash wrap lines theme={null}
    npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/organization-member-management
    ```

    This installs the React component source code into `src/components/auth0/my-organization/` along with dependencies and `@auth0/universal-components-core`.

    ## Get started

    ```tsx wrap lines theme={null}
    import { OrganizationMemberManagement } from "@/components/auth0/my-organization/organization-member-management";

    export function MembersPage() {
      return <OrganizationMemberManagement />;
    }
    ```

    <Accordion title="Full integration example">
      ```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>
        );
      }
      ```
    </Accordion>
  </Tab>
</Tabs>

## Props

### Display props

Display props control how the component renders without affecting its behavior. Use these to hide sections or enable read-only mode.

| Prop         | Type      | Description                                                                             |
| :----------- | :-------- | :-------------------------------------------------------------------------------------- |
| `hideHeader` | `boolean` | Hide the component header section (title and description). Default: `false`             |
| `readOnly`   | `boolean` | Disable all mutation actions (invite, revoke, resend, remove, assign). Default: `false` |

***

### Action props

Action props handle user interactions and define what happens when users perform member and invitation operations. Use lifecycle hooks (`onBefore`, `onAfter`) to integrate with your application's routing and analytics.

| Prop                           | Type                                                       | Description                                        |
| :----------------------------- | :--------------------------------------------------------- | :------------------------------------------------- |
| `createInvitationAction`       | `ComponentAction<CreateInvitationInput, MemberInvitation>` | Invite members action.                             |
| `revokeInvitationAction`       | `ComponentAction<MemberInvitation[]>`                      | Revoke invitation action.                          |
| `resendInvitationAction`       | `ComponentAction<MemberInvitation, MemberInvitation>`      | Resend invitation action.                          |
| `viewMemberDetailsAction`      | `ComponentAction<ViewMemberDetailsParams>`                 | View member details action.                        |
| `removeFromOrganizationAction` | `ComponentAction<string>`                                  | Remove member action.                              |
| `assignRolesAction`            | `ComponentAction`                                          | Assign roles. Hooks receive `{ userId, roleIds }`. |

**createInvitationAction**

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

Controls invitation creation (up to 10 invitees per request).

* `onBefore(input)` runs synchronously before sending. Return `false` to cancel.
* `onAfter(input, createdInvitation)` runs after the invitation is created.

```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,
      });
    },
  }}
/>
```

**Invitation connection routing**

The invitation picker lists eligible Enterprise SSO identity providers and enabled User Stores / User Directories configured for the organization.

The connection selector queries both sources:

* `GET /my-org/identity-providers` (filters for eligible member access levels)
* `GET /my-org/user-stores` (filters for `is_enabled: true`)

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

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

The payload sent to `createInvitationAction` routes using exactly one applicable identifier based on the selected connection type:

* **Enterprise SSO connection selected:** the payload populates `identity_provider_id`.
* **User Store / Directory connection selected:** the payload populates `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;
}
```

Connection routing rules:

* **Auto-selection:** If an organization has only one eligible connection, that connection is selected by default and remains editable.
* **Zero connections:** If no eligible connections exist, the invitation entry point is disabled and displays explanatory feedback.
* **Revoke and resend:** The revoke-and-resend flow preserves the original connection routing source (`user_store_id` or `identity_provider_id`).
* **Connection eligibility:** The invitation picker includes connections configured with a `limited` or `full` member access level.

**revokeInvitationAction**

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

Controls invitation revocation (supports single and bulk revocations up to 10 invitations per batch).

* `onBefore(invitations)` confirms before revoking. Return `false` to cancel.
* `onAfter(invitations)` runs after invitations are revoked.

```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**

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

Controls the revoke-and-resend flow.

* `onBefore(invitation)` confirms before resending. Return `false` to cancel.
* `onAfter(original, newInvitation)` runs after a fresh invitation is created.

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

**viewMemberDetailsAction**

**Type:** `ComponentAction<ViewMemberDetailsParams>`

Fires when selecting a member row or roles badge. Receives `{ userId, tab }`. Wire this to navigate to `OrganizationMemberDetail`.

* `onAfter({ userId, tab })` runs on selection. Preserve `tab` in your router URL to open the requested tab directly.

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

**removeFromOrganizationAction**

**Type:** `ComponentAction<string>`

Controls member removal from the organization (membership only; does not delete the user profile from the Auth0 user store). Both hooks receive the `userId`.

* `onBefore(userId)` confirms before removal. Return `false` to cancel.
* `onAfter(userId)` runs after removal.

```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**

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

Fires after assigning roles from the row modal. Role selections are capped at 10 roles per assignment request, and an individual member can have up to 50 total roles assigned. Both hooks receive `{ userId, roleIds }`.

* `onBefore({ userId, roleIds })` validates selection. Return `false` to cancel.
* `onAfter({ userId, roleIds })` runs after roles are assigned.

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

***

### Customization props

| Prop             | Type                                                    | Description                        |
| :--------------- | :------------------------------------------------------ | :--------------------------------- |
| `customMessages` | `Partial<OrganizationMemberManagementMessages>`         | Copy and text overrides.           |
| `styling`        | `ComponentStyling<OrganizationMemberManagementClasses>` | CSS variables and class overrides. |

**customMessages**

Override bundled component text. Every field is optional and falls back to the built-in default.

<Accordion title="Common message groups">
  **header**—Component header

  * `title`, `description`

  **tabs**—Tab labels

  * `members`, `invitations`

  **count\_capped**—Capped count indicator

  * Text displayed when member or invitation count exceeds 1,000 items

  **member.table**—Member table display

  * `columns.name`, `columns.roles`, `columns.last_login`
  * `empty_message`, `search_placeholder`

  **member.actions**—Member row actions

  * `menu_label`, `remove_from_organization`, `view_details`

  **member.assign\_roles**—Assign roles modal

  * `title`, `description`
  * `roles_label`, `roles_placeholder`
  * `submit_button`, `cancel_button`, `no_roles_available`

  **member.remove\_from\_organization**—Remove member confirmation

  * `title`, `description`
  * `confirm_button`, `cancel_button`

  **member.success / member.error**—Member action statuses

  * `success.removed_from_organization`, `success.role_assigned`
  * `error.fetch_failed`, `error.assign_roles_failed`, `error.remove_from_organization_failed`

  **invitation.table**—Invitation table display

  * `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**—Invitation row actions

  * `menu_label`, `view_details`, `copy_url`, `revoke_and_resend`, `revoke`

  **invitation.create**—Create invitation modal

  * `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**—Invitation details drawer

  * `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**—Revocation confirmations

  * `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**—Bulk revocation confirmation

  * `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**—Invitation statuses and alerts

  * `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`
</Accordion>

```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**

Customize appearance with CSS variables and class overrides. Variables support `light`, `dark`, and `common` scopes. Class overrides target named slots inside the component tree.

<Accordion title="Available styling options">
  **Variables**—CSS custom properties

  * `common`—Applied to all themes
  * `light`—Light theme only
  * `dark`—Dark theme only

  **Classes**—Targeted element class overrides

  * `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`
</Accordion>

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

***

## Advanced customization

### Available hooks

These hooks provide the underlying logic without any UI. Use them to build completely custom interfaces while leveraging the Auth0 API integration.

| Hook                              | Description                                                                                  |
| :-------------------------------- | :------------------------------------------------------------------------------------------- |
| `useOrganizationMemberManagement` | Member and invitation data, tab and pagination state, modal state, and interaction handlers. |