+```tsx lines
+import React from "react";
+import { OrganizationMemberManagement } from "@auth0/universal-components-react";
+import { Auth0Provider } from "@auth0/auth0-react";
+import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
+import { useNavigate } from "react-router-dom";
+import { analytics } from "./lib/analytics";
+import { auditLog } from "./lib/audit-log";
+
+function MembersPage() {
+ const navigate = useNavigate();
+
+ return (
+
+ !blocklist.includes(input.invitees[0].email),
+ onAfter: (input) => {
+ analytics.track("Invitation Sent", {
+ email: input.invitees[0].email,
+ });
+ },
+ }}
+ revokeInvitationAction={{
+ onAfter: () => refetchSeatUsage(),
+ }}
+ resendInvitationAction={{
+ onAfter: (_, newInvitation) => {
+ toast.success(`Invitation resent to ${newInvitation.invitee.email}`);
+ },
+ }}
+ viewMemberDetailsAction={{
+ onAfter: ({ userId, tab }) =>
+ navigate(tab ? `/members/${userId}?tab=${tab}` : `/members/${userId}`),
+ }}
+ removeFromOrganizationAction={{
+ onBefore: async (userId) =>
+ 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",
+ description: "Manage who has access to your organization",
+ },
+ tabs: { members: "Members", invitations: "Pending Invites" },
+ }}
+ 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 (
+
+
+
+
+
+ );
+}
+```
+
+
+## Props
+
+`OrganizationMemberManagement` has no required props. It loads the current Organization's members and pending invitations from the My Organization API automatically.
+
+### 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. Default: `false` |
+| `readOnly` | `boolean` | Disable all mutation actions (invite, revoke, resend). 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