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

# Gérer les membres de l’Organization sur le Web

> Gérez les membres de l’Organization et les invitations en attente dans une interface à onglets offrant des options complètes de gestion du cycle de vie des invitations.

> [!WARNING]
>
> **La fonctionnalité Auth0 Universal Components est en .**

Le composant `OrganizationMemberManagement` offre une interface unifiée pour gérer les membres et les invitations de votre [Organization](https://auth0.com/docs/fr-ca/manage-users/organizations.md).

Chargement

Aperçu du composant de gestion des membres de l’Organization

> [tab] React
>
> ## Prérequis de configuration
>
> **Configuration Auth0 requise**—Assurez-vous que votre locataire est configuré avec l’API My Organization. [Consultez le guide de configuration →](https://auth0.com/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin.md#configure-auth0-dashboard)
>
> ## Installation
>
> ```bash pnpm wrap lines theme={null}
> pnpm add @auth0/universal-components-react
> ```
>
> ## Pour commencer
>
> ```tsx wrap lines theme={null}
> import { OrganizationMemberManagement } from "@auth0/universal-components-react";
>
> export function MembersPage() {
>   return <OrganizationMemberManagement />;
> }
> ```
>
> Pour permettre aux administrateurs d’afficher les détails d’un membre, associez `viewMemberDetailsAction` à la route qui héberge [`OrganizationMemberDetail`](https://auth0.com/docs/fr-ca/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] Exemple d’intégration complet
> >
> > ```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
>
> ## Prérequis de configuration
>
> **Configuration d’Auth0 requise**—Assurez-vous que votre locataire est configuré avec l’API My Organization. [Consultez le guide de configuration →](https://auth0.com/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin.md#configure-auth0-dashboard)
>
> ## Installation
>
> ```bash pnpm wrap lines theme={null}
> pnpm add @auth0/universal-components-react
> ```
>
> ## Pour commencer
>
> ```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] Exemple d'intégration complet
> >
> > ```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
>
> ## Exigences de configuration
>
> **Configuration Auth0 requise** — Assurez-vous que votre locataire est configuré avec l'API My Organization. [Consulter le guide de configuration →](https://auth0.com/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin.md#configure-auth0-dashboard)
>
> ## Installation
>
> Installez le composant avec l'interface de ligne de commande shadcn à partir du registre GitHub :
>
> ```bash wrap lines theme={null}
> npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/organization-member-management
> ```
>
> Cette commande installe le code source du composant React dans `src/components/auth0/my-organization/`, ainsi que les dépendances et `@auth0/universal-components-core`.
>
> ## Pour commencer
>
> ```tsx wrap lines theme={null}
> import { OrganizationMemberManagement } from "@/components/auth0/my-organization/organization-member-management";
>
> export function MembersPage() {
>   return <OrganizationMemberManagement />;
> }
> ```
>
> > [accordion] Exemple complet d’intégration
> >
> > ```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>
> >   );
> > }
> > ```

## Props

### Props d'affichage

Les props d'affichage déterminent le rendu du composant sans en modifier le comportement. Utilisez-les pour masquer des sections ou activer le mode lecture seule.

| Prop | Type | Description |
| :- | :- | :- |
| `hideHeader` | `boolean` | Masquer la section d'en-tête du composant (titre et description). Valeur par défaut : `false` |
| `readOnly` | `boolean` | Désactiver toutes les actions de mutation (inviter, révoquer, renvoyer, retirer, assigner). Valeur par défaut : `false` |

***

### Props d’action

Les props d’action gèrent les interactions utilisateur et définissent ce qui se passe lorsque les utilisateurs effectuent des opérations sur les membres et les invitations. Utilisez les hooks de cycle de vie (`onBefore`, `onAfter`) pour intégrer le routage et les analyses de votre application.

| Prop | Type | Description |
| :- | :- | :- |
| `createInvitationAction` | `ComponentAction<CreateInvitationInput, MemberInvitation>` | Action d’invitation de membres. |
| `revokeInvitationAction` | `ComponentAction<MemberInvitation[]>` | Action de révocation d’une invitation. |
| `resendInvitationAction` | `ComponentAction<MemberInvitation, MemberInvitation>` | Action de renvoi d’une invitation. |
| `viewMemberDetailsAction` | `ComponentAction<ViewMemberDetailsParams>` | Action d’affichage des détails d’un membre. |
| `removeFromOrganizationAction` | `ComponentAction<string>` | Action de suppression d’un membre. |
| `assignRolesAction` | `ComponentAction` | Attribution de rôles. Les hooks reçoivent `{ userId, roleIds }`. |

**createInvitationAction**

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

Contrôle la création d’invitations (jusqu’à 10 destinataires par demande).

* `onBefore(input)` s’exécute de façon synchrone avant l’envoi. Retournez `false` pour annuler.
* `onAfter(input, createdInvitation)` s’exécute après la création de l’invitation.

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

**Routage des connexions d’invitation**

Le sélecteur d’invitations répertorie les fournisseurs d’identité SSO Entreprise admissibles ainsi que les magasins d’utilisateurs et répertoires d’utilisateurs activés configurés pour l’Organization.

Le sélecteur de connexion interroge les deux sources :

* `GET /my-org/identity-providers` (filtre selon les niveaux d’accès aux membres admissibles)
* `GET /my-org/user-stores` (filtre selon `is_enabled: true`)

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

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

La charge utile envoyée à `createInvitationAction` est acheminée à l’aide d’un seul identifiant, selon le type de connexion sélectionné :

* **Connexion SSO Entreprise sélectionnée :** la charge utile renseigne `identity_provider_id`.
* **Connexion Magasin d'utilisateurs / Directory sélectionnée :** la charge utile renseigne `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;
}
```

Règles de routage des connexions :

* **Sélection automatique :** si une Organization ne compte qu'une seule connexion admissible, celle-ci est sélectionnée par défaut et demeure modifiable.
* **Aucune connexion :** s'il n'existe aucune connexion admissible, le point d'entrée d'invitation est désactivé et affiche un message explicatif.
* **Révocation et renvoi :** le flux de révocation et de renvoi conserve la source de routage de connexion d'origine (`user_store_id` ou `identity_provider_id`).
* **Admissibilité des connexions :** le sélecteur d'invitation inclut les connexions configurées avec un niveau d'accès de membre `limited` ou `full`.

**revokeInvitationAction**

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

Contrôle la révocation des invitations (prend en charge les révocations individuelles et en lot, jusqu'à 10 invitations par lot).

* `onBefore(invitations)` demande une confirmation avant la révocation. Retournez `false` pour annuler.
* `onAfter(invitations)` s'exécute après la révocation des 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**

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

Contrôle le flux de révocation et de renvoi.

* `onBefore(invitation)` demande une confirmation avant le renvoi. Retournez `false` pour annuler.
* `onAfter(original, newInvitation)` s’exécute après la création d’une nouvelle invitation.

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

Se déclenche lorsqu’une ligne de membre ou un badge de rôles est sélectionné. Reçoit `{ userId, tab }`. Connectez ceci pour naviguer vers `OrganizationMemberDetail`.

* `onAfter({ userId, tab })` s’exécute lors de la sélection. Conservez `tab` dans l’URL de votre routeur afin d’ouvrir directement l’onglet demandé.

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

**removeFromOrganizationAction**

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

Contrôle le retrait d’un membre de l’Organization (adhésion seulement ; ne supprime pas le profil utilisateur du magasin d'utilisateurs Auth0). Les deux hooks reçoivent le `userId`.

* `onBefore(userId)` demande une confirmation avant le retrait. Retournez `false` pour annuler.
* `onAfter(userId)` s’exécute après le retrait.

```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[] }>`

Se déclenche après l’attribution de rôles dans la fenêtre modale de la ligne. Le nombre de rôles sélectionnés est limité à 10 par demande d’attribution, et un membre peut avoir jusqu’à 50 rôles au total. Les deux hooks reçoivent `{ userId, roleIds }`.

* `onBefore({ userId, roleIds })` valide la sélection. Retournez `false` pour annuler.
* `onAfter({ userId, roleIds })` s’exécute après l’attribution des rôles.

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

***

### Props de personnalisation

| Prop | Type | Description |
| :- | :- | :- |
| `customMessages` | `Partial<OrganizationMemberManagementMessages>` | Remplacements de libellés et de texte. |
| `styling` | `ComponentStyling<OrganizationMemberManagementClasses>` | Variables CSS et remplacements de classes. |

**customMessages**

Remplacez les textes fournis avec le composant. Chaque champ est facultatif et utilise la valeur par défaut intégrée.

> [accordion] Groupes de messages courants
>
> **header**—En-tête du composant
>
> * `title`, `description`
>
> **tabs**—Libellés des onglets
>
> * `members`, `invitations`
>
> **count\_capped**—Indicateur de nombre plafonné
>
> * Texte affiché lorsque le nombre de membres ou d’invitations dépasse 1 000 éléments
>
> **member.table**—Affichage du tableau des membres
>
> * `columns.name`, `columns.roles`, `columns.last_login`
> * `empty_message`, `search_placeholder`
>
> **member.actions**—Actions associées aux lignes des membres
>
> * `menu_label`, `remove_from_organization`, `view_details`
>
> **member.assign\_roles**—Fenêtre modale d’attribution de rôles
>
> * `title`, `description`
> * `roles_label`, `roles_placeholder`
> * `submit_button`, `cancel_button`, `no_roles_available`
>
> **member.remove\_from\_organization**—Confirmation de suppression d’un membre
>
> * `title`, `description`
> * `confirm_button`, `cancel_button`
>
> **member.success / member.error**—États des actions sur les membres
>
> * `success.removed_from_organization`, `success.role_assigned`
> * `error.fetch_failed`, `error.assign_roles_failed`, `error.remove_from_organization_failed`
>
> **invitation.table**—Affichage du tableau des invitations
>
> * `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**—Actions associées aux lignes des invitations
>
> * `menu_label`, `view_details`, `copy_url`, `revoke_and_resend`, `revoke`
>
> **invitation.create**—Fenêtre modale de création d’une invitation
>
> * `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**—Panneau de détails de l’invitation
>
> * `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**—Confirmations de révocation
>
> * `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**—Confirmation de révocation en masse
>
> * `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**—États et alertes des invitations
>
> * `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" },
    },
  }}
/>
```

***

**style**

Personnalisez l’apparence à l’aide de variables CSS et de surcharges de classes. Les variables prennent en charge les permissions `light`, `dark` et `common`. Les surcharges de classes ciblent des emplacements nommés dans l’arborescence des composants.

> [accordion] Options de style disponibles
>
> **Variables**—Propriétés personnalisées CSS
>
> * `common`—Appliquées à tous les thèmes
> * `light`—Thème clair uniquement
> * `dark`—Thème sombre uniquement
>
> **Classes**—Surcharges de classes d’éléments ciblés
>
> * `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",
    },
  }}
/>
```

***

## Personnalisation avancée

### Hooks disponibles

Ces hooks fournissent la logique sous-jacente sans interface utilisateur. Utilisez-les pour créer des interfaces entièrement personnalisées tout en tirant parti de l’intégration à l’API Auth0.

| Hook | Description |
| :- | :- |
| `useOrganizationMemberManagement` | Données sur les membres et les invitations, état des onglets, de la pagination et des fenêtres modales, et gestionnaires d’interactions. |