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

# Group Members

> Scrollable, searchable list of members in a specific group with roles, scopes, online status, and member management actions.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatGroupMembers",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatGroupMembers } from \"@cometchat/chat-uikit-react\";",
    "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
    "description": "Scrollable, searchable list of members in a specific group with roles, scopes, online status, and member management actions.",
    "cssRootClass": ".cometchat-group-members",
    "primaryOutput": {
      "prop": "onItemClick",
      "type": "(groupMember: CometChat.GroupMember) => void"
    },
    "props": {
      "data": {
        "group": {
          "type": "CometChat.Group",
          "required": true,
          "note": "The group whose members are displayed"
        },
        "groupMemberRequestBuilder": {
          "type": "CometChat.GroupMembersRequestBuilder",
          "default": "SDK default (30 per page)",
          "note": "Pass the builder, not the result of .build()"
        },
        "searchRequestBuilder": {
          "type": "CometChat.GroupMembersRequestBuilder",
          "default": "undefined"
        },
        "searchKeyword": {
          "type": "string",
          "default": "\"\""
        }
      },
      "callbacks": {
        "onItemClick": "(groupMember: CometChat.GroupMember) => void",
        "onSelect": "(groupMember: CometChat.GroupMember, selected: boolean) => void",
        "onEmpty": "() => void",
        "onError": "((error: CometChat.CometChatException) => void) | null"
      },
      "visibility": {
        "hideSearch": { "type": "boolean", "default": false },
        "hideError": { "type": "boolean", "default": false },
        "hideKickMemberOption": { "type": "boolean", "default": false },
        "hideBanMemberOption": { "type": "boolean", "default": false },
        "hideScopeChangeOption": { "type": "boolean", "default": false },
        "hideUserStatus": { "type": "boolean", "default": false },
        "disableLoadingState": { "type": "boolean", "default": false },
        "showScrollbar": { "type": "boolean", "default": false }
      },
      "selection": {
        "selectionMode": {
          "type": "SelectionMode",
          "values": ["SelectionMode.single (0)", "SelectionMode.multiple (1)", "SelectionMode.none (2)"],
          "default": "SelectionMode.none"
        }
      },
      "viewSlots": {
        "itemView": "(groupMember: CometChat.GroupMember) => JSX.Element",
        "leadingView": "(groupMember: CometChat.GroupMember) => JSX.Element",
        "titleView": "(groupMember: CometChat.GroupMember) => JSX.Element",
        "subtitleView": "(groupMember: CometChat.GroupMember) => JSX.Element",
        "trailingView": "(groupMember: CometChat.GroupMember) => JSX.Element",
        "headerView": "JSX.Element",
        "loadingView": "JSX.Element",
        "emptyView": "JSX.Element",
        "errorView": "JSX.Element",
        "options": "(group: CometChat.Group, groupMember: CometChat.GroupMember) => CometChatOption[]"
      }
    },
    "events": [
      {
        "name": "CometChatGroupEvents.ccGroupMemberKicked",
        "payload": "IGroupMemberKickedBanned",
        "description": "Member kicked"
      },
      {
        "name": "CometChatGroupEvents.ccGroupMemberBanned",
        "payload": "IGroupMemberKickedBanned",
        "description": "Member banned"
      },
      {
        "name": "CometChatGroupEvents.ccGroupMemberScopeChanged",
        "payload": "IGroupMemberScopeChanged",
        "description": "Member scope changed"
      },
      {
        "name": "CometChatGroupEvents.ccGroupMemberAdded",
        "payload": "IGroupMemberAdded",
        "description": "Members added"
      }
    ],
    "sdkListeners": [
      "onGroupMemberScopeChanged",
      "onGroupMemberKicked",
      "onGroupMemberBanned",
      "onMemberAddedToGroup",
      "onGroupMemberLeft",
      "onGroupMemberJoined",
      "onUserOnline",
      "onUserOffline"
    ],
    "types": {
      "CometChatOption": {
        "id": "string | undefined",
        "title": "string | undefined",
        "iconURL": "string | undefined",
        "onClick": "(() => void) | undefined"
      },
      "SelectionMode": {
        "single": 0,
        "multiple": 1,
        "none": 2
      }
    }
  }
  ```
</Accordion>

## Where It Fits

`CometChatGroupMembers` is a panel component that renders the member list for a specific group. It requires a `group` prop and provides built-in member management actions (kick, ban, scope change) based on the logged-in user's role. Typically rendered alongside the message view in a group chat layout.

```tsx lines theme={null}
import { useEffect, useState } from "react";
import {
  CometChatGroupMembers,
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function GroupChatWithMembers() {
  const [group, setGroup] = useState<CometChat.Group>();

  useEffect(() => {
    CometChat.getGroup("GROUP_GUID").then(setGroup);
  }, []);

  if (!group) return null;

  return (
    <div style={{ display: "flex", height: "100vh", width: "100vw" }}>
      <div style={{ width: 300, height: "100%" }}>
        <CometChatGroupMembers group={group} />
      </div>
      <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
        <CometChatMessageHeader group={group} />
        <CometChatMessageList group={group} />
        <CometChatMessageComposer group={group} />
      </div>
    </div>
  );
}
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/aledzZZMtw_sXx4U/images/fc565456-group_members_overview_web_screens-448397c54784d0c68f66dfdf98656483.png?fit=max&auto=format&n=aledzZZMtw_sXx4U&q=85&s=16bae003c387b76e734c91474927a1e4" width="1280" height="800" data-path="images/fc565456-group_members_overview_web_screens-448397c54784d0c68f66dfdf98656483.png" />
</Frame>

***

## Minimal Render

```tsx lines theme={null}
import { useEffect, useState } from "react";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function GroupMembersDemo() {
  const [group, setGroup] = useState<CometChat.Group>();

  useEffect(() => {
    CometChat.getGroup("GROUP_GUID").then(setGroup);
  }, []);

  return group ? (
    <div style={{ width: "100%", height: "100%" }}>
      <CometChatGroupMembers group={group} />
    </div>
  ) : null;
}

export default GroupMembersDemo;
```

Root CSS class: `.cometchat-group-members`

***

## Filtering Group Members

Pass a `CometChat.GroupMembersRequestBuilder` to `groupMemberRequestBuilder`. Pass the builder instance — not the result of `.build()`.

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function FilteredGroupMembers({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      groupMemberRequestBuilder={
        new CometChat.GroupMembersRequestBuilder(group.getGuid())
          .setScopes(["admin", "moderator"])
          .setLimit(10)
      }
    />
  );
}
```

### Filter Recipes

| Recipe                     | Code                                                                                 |
| -------------------------- | ------------------------------------------------------------------------------------ |
| Limit to 10 per page       | `new CometChat.GroupMembersRequestBuilder("GUID").setLimit(10)`                      |
| Search by keyword          | `new CometChat.GroupMembersRequestBuilder("GUID").setSearchKeyword("john")`          |
| Admins and moderators only | `new CometChat.GroupMembersRequestBuilder("GUID").setScopes(["admin", "moderator"])` |

Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.

The `searchRequestBuilder` prop accepts a separate `GroupMembersRequestBuilder` for filtering when the search bar is active.

Refer to [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) for the full builder API.

***

## Actions and Events

### Callback Props

#### onItemClick

Fires when a member row is tapped.

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function GroupMembersWithClick({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      onItemClick={(member: CometChat.GroupMember) => {
        console.log("Selected member:", member.getName());
      }}
    />
  );
}
```

#### onSelect

Fires when a member is checked/unchecked in multi-select mode. Requires `selectionMode` to be set.

```tsx lines theme={null}
import { useState } from "react";
import {
  CometChatGroupMembers,
  SelectionMode,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function BatchSelectMembers({ group }: { group: CometChat.Group }) {
  const [selected, setSelected] = useState<Set<string>>(new Set());

  return (
    <CometChatGroupMembers
      group={group}
      selectionMode={SelectionMode.multiple}
      onSelect={(member: CometChat.GroupMember, isSelected: boolean) => {
        setSelected((prev) => {
          const next = new Set(prev);
          const uid = member.getUid();
          isSelected ? next.add(uid) : next.delete(uid);
          return next;
        });
      }}
    />
  );
}
```

#### onEmpty

Fires when the member list has no data to display.

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function GroupMembersWithEmpty({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      onEmpty={() => console.log("No members found")}
    />
  );
}
```

#### onError

Fires on internal errors (network failure, auth issue, SDK exception).

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function GroupMembersWithError({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      onError={(error: CometChat.CometChatException) => {
        console.error("CometChatGroupMembers error:", error);
      }}
    />
  );
}
```

### Global UI Events

`CometChatGroupEvents` emits events subscribable from anywhere in the application. The component both emits and subscribes to these events.

Events emitted by this component:

| Event                       | Fires when               | Payload                    |
| --------------------------- | ------------------------ | -------------------------- |
| `ccGroupMemberKicked`       | A member is kicked       | `IGroupMemberKickedBanned` |
| `ccGroupMemberBanned`       | A member is banned       | `IGroupMemberKickedBanned` |
| `ccGroupMemberScopeChanged` | A member's scope changes | `IGroupMemberScopeChanged` |

Events subscribed internally:

| Event                       | Internal behavior                       |
| --------------------------- | --------------------------------------- |
| `ccGroupMemberKicked`       | Removes the kicked member from the list |
| `ccGroupMemberBanned`       | Removes the banned member from the list |
| `ccGroupMemberScopeChanged` | Updates the member's scope in the list  |
| `ccGroupMemberAdded`        | Appends newly added members to the list |

```tsx lines theme={null}
import { useEffect } from "react";
import { CometChatGroupEvents } from "@cometchat/chat-uikit-react";

function useGroupMemberEvents() {
  useEffect(() => {
    const kickedSub = CometChatGroupEvents.ccGroupMemberKicked.subscribe(
      (item) => {
        console.log("Member kicked:", item.kickedUser.getName());
      }
    );
    const scopeSub = CometChatGroupEvents.ccGroupMemberScopeChanged.subscribe(
      (item) => {
        console.log("Scope changed:", item.updatedUser.getName(), "to", item.scopeChangedTo);
      }
    );

    return () => {
      kickedSub?.unsubscribe();
      scopeSub?.unsubscribe();
    };
  }, []);
}
```

### SDK Events (Real-Time, Automatic)

The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.

| SDK Listener                     | Internal behavior                                                                  |
| -------------------------------- | ---------------------------------------------------------------------------------- |
| `onGroupMemberScopeChanged`      | Updates the member's scope in the list                                             |
| `onGroupMemberKicked`            | Removes the kicked member from the list                                            |
| `onGroupMemberBanned`            | Removes the banned member from the list                                            |
| `onMemberAddedToGroup`           | Appends the new member to the list                                                 |
| `onGroupMemberLeft`              | Removes the member who left from the list                                          |
| `onGroupMemberJoined`            | Appends the joined member to the list                                              |
| `onUserOnline` / `onUserOffline` | Updates the member's online/offline status (disabled when `hideUserStatus={true}`) |

<Note>
  In React 18 StrictMode, `useEffect` runs twice on mount in development. The component handles listener cleanup internally, but any additional listeners added alongside the component need cleanup in the `useEffect` return function to avoid duplicate event handling.
</Note>

***

## Custom View Slots

Each slot replaces a section of the default UI. Slots that accept a member parameter receive the `CometChat.GroupMember` object for that row.

| Slot           | Signature                                                                           | Replaces                              |
| -------------- | ----------------------------------------------------------------------------------- | ------------------------------------- |
| `itemView`     | `(groupMember: CometChat.GroupMember) => JSX.Element`                               | Entire list item row                  |
| `leadingView`  | `(groupMember: CometChat.GroupMember) => JSX.Element`                               | Avatar / left section                 |
| `titleView`    | `(groupMember: CometChat.GroupMember) => JSX.Element`                               | Name / title text                     |
| `subtitleView` | `(groupMember: CometChat.GroupMember) => JSX.Element`                               | Subtitle text                         |
| `trailingView` | `(groupMember: CometChat.GroupMember) => JSX.Element`                               | Right section (scope badge / actions) |
| `headerView`   | `JSX.Element`                                                                       | Entire header bar                     |
| `loadingView`  | `JSX.Element`                                                                       | Loading spinner                       |
| `emptyView`    | `JSX.Element`                                                                       | Empty state                           |
| `errorView`    | `JSX.Element`                                                                       | Error state                           |
| `options`      | `(group: CometChat.Group, groupMember: CometChat.GroupMember) => CometChatOption[]` | Context menu / hover actions          |

### itemView

Replace the entire list item row.

Default:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/O4T1K2wxFuaRj1dC/images/a4ba8be1-group_members_listitemview_default_web_screens-5b8840bd6f3ce2799707ce7ea2951e89.png?fit=max&auto=format&n=O4T1K2wxFuaRj1dC&q=85&s=22ae3e1515e369a6b79d840012a6f6f7" width="1280" height="800" data-path="images/a4ba8be1-group_members_listitemview_default_web_screens-5b8840bd6f3ce2799707ce7ea2951e89.png" />
</Frame>

Customized:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/udim9ku6wPsRNXGs/images/e0d9b4dc-group_members_listitemview_custom_web_screens-c804cdfd10e7e040c95f65ecfa045421.png?fit=max&auto=format&n=udim9ku6wPsRNXGs&q=85&s=3d4714bab2a5bb8b9b734a58b30c774e" width="1280" height="800" data-path="images/e0d9b4dc-group_members_listitemview_custom_web_screens-c804cdfd10e7e040c95f65ecfa045421.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatAvatar,
      CometChatGroupMembers,
    } from "@cometchat/chat-uikit-react";

    function CustomItemViewMembers({ group }: { group: CometChat.Group }) {
      const getItemView = (member: CometChat.GroupMember) => {
        const scope = member.getScope();
        return (
          <div className="group-member-list-item">
            <div className="group-member-list-item__avatar">
              <CometChatAvatar image={member.getAvatar()} name={member.getName()} />
            </div>
            <div className="group-member-list-item__content">
              <div className="group-member-list-item__content-name">{member.getName()}</div>
              <div className={`group-member-list-item__content-tag group-member-list-item__content-tag-${scope}`}>
                {scope}
              </div>
            </div>
          </div>
        );
      };

      return <CometChatGroupMembers group={group} itemView={getItemView} />;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .group-member-list-item {
      display: flex;
      min-width: 240px;
      padding: 8px 16px;
      align-items: center;
      gap: 12px;
      background: #fff;
    }

    .group-member-list-item__content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .group-member-list-item__avatar {
      width: 40px;
      height: 40px;
    }

    .group-member-list-item__content-name {
      overflow: hidden;
      color: #141414;
      text-overflow: ellipsis;
      font: 500 16px Roboto;
    }

    .group-member-list-item__content-tag {
      display: flex;
      padding: 4px 12px;
      border-radius: 1000px;
      background: #edeafa;
      color: #6852d6;
      font: 400 12px Roboto;
    }

    .group-member-list-item__content-tag-owner {
      background: #6852d6;
      color: #fff;
    }

    .group-member-list-item__content-tag-admin {
      border: 1px solid #6852d6;
    }

    .group-member-list-item__content-tag-participant {
      display: none;
    }
    ```
  </Tab>
</Tabs>

### subtitleView

Replace the subtitle text. Joined date example.

Default:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/_oiGBuX1qG3S8Eo5/images/61f20b67-group_members_subtitleview_default_web_screens-9f5cd5b191f8d3dfdec49a6cd0997c55.png?fit=max&auto=format&n=_oiGBuX1qG3S8Eo5&q=85&s=dfc686e7b849a6c79422f4c27ddfc28b" width="1280" height="800" data-path="images/61f20b67-group_members_subtitleview_default_web_screens-9f5cd5b191f8d3dfdec49a6cd0997c55.png" />
</Frame>

Customized:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/HFXOvmhiLRb5ClID/images/923f8e60-group_members_subtitleview_custom_web_screens-805d87b822b312ce9afd8aaee10ae20d.png?fit=max&auto=format&n=HFXOvmhiLRb5ClID&q=85&s=b012e6e1ffdb117d3fa0622931003e18" width="1280" height="800" data-path="images/923f8e60-group_members_subtitleview_custom_web_screens-805d87b822b312ce9afd8aaee10ae20d.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";

    function SubtitleMembers({ group }: { group: CometChat.Group }) {
      const getSubtitleView = (member: CometChat.GroupMember) => {
        const date = new Date(member.getJoinedAt() * 1000).toLocaleDateString();
        return <div className="group-member-subtitle">Joined: {date}</div>;
      };

      return <CometChatGroupMembers group={group} subtitleView={getSubtitleView} />;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .group-member-subtitle {
      overflow: hidden;
      color: #727272;
      text-overflow: ellipsis;
      white-space: nowrap;
      font: 400 14px Roboto;
    }
    ```
  </Tab>
</Tabs>

### trailingView

Replace the right section. Scope tag example.

Default:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/dDWpooIQ48haNjyU/images/77b0d08c-group_members_tailview_default_web_screens-9f5cd5b191f8d3dfdec49a6cd0997c55.png?fit=max&auto=format&n=dDWpooIQ48haNjyU&q=85&s=c952dcf99ccd202db4bea1aa2298b785" width="1280" height="800" data-path="images/77b0d08c-group_members_tailview_default_web_screens-9f5cd5b191f8d3dfdec49a6cd0997c55.png" />
</Frame>

Customized:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/RxKy5RgybeX-8GbH/images/1c4e58ee-group_members_tailview_custom_web_screens-055d509a3005e4999becda952d9001e3.png?fit=max&auto=format&n=RxKy5RgybeX-8GbH&q=85&s=7cbc70b4b8d5c843cc178bbc721e3301" width="1280" height="800" data-path="images/1c4e58ee-group_members_tailview_custom_web_screens-055d509a3005e4999becda952d9001e3.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";

    function TrailingViewMembers({ group }: { group: CometChat.Group }) {
      const getTrailingView = (member: CometChat.GroupMember) => {
        return (
          <div className="group-member-scope-tag">
            {member.getScope()}
          </div>
        );
      };

      return <CometChatGroupMembers group={group} trailingView={getTrailingView} />;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .group-member-scope-tag {
      display: flex;
      padding: 4px 12px;
      border-radius: 1000px;
      background: #edeafa;
      color: #6852d6;
      font: 400 12px Roboto;
    }
    ```
  </Tab>
</Tabs>

### headerView

Replace the entire header bar.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/0Cdnhz6eU6kdn5Ms/images/b33f809d-group_member_headerview-234678815906bbb7e26ae2bddb71f972.png?fit=max&auto=format&n=0Cdnhz6eU6kdn5Ms&q=85&s=ac0e7f1e7bf2a107a7cb27d0c70dc8a0" width="1280" height="330" data-path="images/b33f809d-group_member_headerview-234678815906bbb7e26ae2bddb71f972.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    import {
      CometChatGroupMembers,
      CometChatButton,
      getLocalizedString,
    } from "@cometchat/chat-uikit-react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";

    function CustomHeaderMembers({ group }: { group: CometChat.Group }) {
      return (
        <CometChatGroupMembers
          group={group}
          headerView={
            <div className="group-members__header">
              <div className="group-members__header__title">
                {getLocalizedString("GROUP_MEMBERS")}
              </div>
              <CometChatButton onClick={() => { /* handle click */ }} />
            </div>
          }
        />
      );
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .group-members__header {
      display: flex;
      width: 100%;
      padding: 8px 16px;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-radius: 10px;
      border: 1px solid #e8e8e8;
      background: #edeafa;
    }

    .group-members__header__title {
      overflow: hidden;
      color: #141414;
      text-overflow: ellipsis;
      font: 700 24px Roboto;
    }
    ```
  </Tab>
</Tabs>

### options

Replace the context menu / hover actions on each member item. The `options` callback receives both the group and the member.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/tiy_c-4NywbKIGIr/images/7ce43a63-group_members_options_web_screens-c7a97fe4857af207bf473eb087d15f65.png?fit=max&auto=format&n=tiy_c-4NywbKIGIr&q=85&s=9fa4954cdfcc00d587c0c427ac24bc49" width="1280" height="539" data-path="images/7ce43a63-group_members_options_web_screens-c7a97fe4857af207bf473eb087d15f65.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatGroupMembers,
      CometChatOption,
    } from "@cometchat/chat-uikit-react";

    function CustomOptionsMembers({ group }: { group: CometChat.Group }) {
      return (
        <CometChatGroupMembers
          group={group}
          options={(g: CometChat.Group, member: CometChat.GroupMember) => [
            new CometChatOption({
              id: "kick",
              title: "Kick User",
              onClick: () => { /* kick logic */ },
            }),
          ]}
        />
      );
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .cometchat-group-members .cometchat-menu-list__main-menu-item-icon {
      background: #f44649;
    }

    .cometchat-group-members .cometchat-menu-list__menu {
      background: transparent;
      box-shadow: none;
    }
    ```
  </Tab>
</Tabs>

***

## Common Patterns

### Hide member management actions

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function ReadOnlyMembers({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      hideKickMemberOption={true}
      hideBanMemberOption={true}
      hideScopeChangeOption={true}
    />
  );
}
```

### Admins and moderators only

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function AdminMembers({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      groupMemberRequestBuilder={
        new CometChat.GroupMembersRequestBuilder(group.getGuid())
          .setScopes(["admin", "moderator"])
      }
    />
  );
}
```

### Minimal chrome

```tsx lines theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function MinimalMembers({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      hideSearch={true}
      hideUserStatus={true}
      hideKickMemberOption={true}
      hideBanMemberOption={true}
      hideScopeChangeOption={true}
    />
  );
}
```

***

## CSS Architecture

The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade:

1. Global tokens (e.g., `--cometchat-primary-color`, `--cometchat-background-color-01`) are set on the `.cometchat` root wrapper.
2. Component CSS (`.cometchat-group-members`) consumes these tokens via `var()` with fallback values.
3. Overrides target `.cometchat-group-members` descendant selectors in a global stylesheet.

### Key Selectors

| Target                  | Selector                                                                  |
| ----------------------- | ------------------------------------------------------------------------- |
| Root                    | `.cometchat-group-members`                                                |
| Header title            | `.cometchat-group-members .cometchat-list__header-title`                  |
| List item               | `.cometchat-group-members .cometchat-list-item`                           |
| Body title              | `.cometchat-group-members .cometchat-list-item__body-title`               |
| Trailing view           | `.cometchat-group-members .cometchat-list-item__trailing-view`            |
| Scope badge             | `.cometchat-group-members__trailing-view-options`                         |
| Admin scope badge       | `.cometchat-group-members__trailing-view-options-admin`                   |
| Owner scope badge       | `.cometchat-group-members__trailing-view-options-owner`                   |
| Participant scope badge | `.cometchat-group-members__trailing-view-options-participant`             |
| Online status           | `.cometchat-group-members__list-item-online .cometchat-list-item__status` |
| Scope change dropdown   | `.cometchat-group-members .cometchat-menu-list__sub-menu`                 |
| Empty state             | `.cometchat-group-members__empty-state-view`                              |
| Error state             | `.cometchat-group-members__error-state-view`                              |
| Shimmer loading         | `.cometchat-group-members__shimmer`                                       |
| Backdrop (modal)        | `.cometchat-group-members__backdrop`                                      |

### Example: Brand-themed group members

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/gHkTur1I2BmQKdRR/images/0651a0d7-group_members_style_web_screens-23265ad899155117d9bb15ee54742665.png?fit=max&auto=format&n=gHkTur1I2BmQKdRR&q=85&s=a53ddf4791ee7c6def18798305744c1d" width="1280" height="800" data-path="images/0651a0d7-group_members_style_web_screens-23265ad899155117d9bb15ee54742665.png" />
</Frame>

```css lines theme={null}
.cometchat-group-members .cometchat-list__header-title {
  background: #feede1;
  color: #f76808;
  font-family: "Times New Roman";
}

.cometchat-group-members .cometchat-list-item__body-title {
  font-family: "Times New Roman";
}

.cometchat-group-members .cometchat-group-members__trailing-view-options {
  font-family: "Times New Roman";
}
```

### Customization Matrix

| What to change                        | Where           | Property/API                            | Example                                                                                             |
| ------------------------------------- | --------------- | --------------------------------------- | --------------------------------------------------------------------------------------------------- |
| Override behavior on user interaction | Component props | `on<Event>` callbacks                   | `onItemClick={(m) => openProfile(m)}`                                                               |
| Filter which members appear           | Component props | `groupMemberRequestBuilder`             | `groupMemberRequestBuilder={new CometChat.GroupMembersRequestBuilder("GUID").setScopes(["admin"])}` |
| Toggle visibility of UI elements      | Component props | `hide<Feature>` boolean props           | `hideKickMemberOption={true}`                                                                       |
| Replace a section of the list item    | Component props | `<slot>View` render props               | `subtitleView={(m) => <div>{m.getScope()}</div>}`                                                   |
| Change colors, fonts, spacing         | Global CSS      | Target `.cometchat-group-members` class | `.cometchat-group-members .cometchat-avatar { border-radius: 8px; }`                                |

***

## Props

All props are optional unless noted otherwise.

***

### disableLoadingState

Skips the loading spinner when re-fetching.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### emptyView

Custom component displayed when there are no members.

|         |                      |
| ------- | -------------------- |
| Type    | `JSX.Element`        |
| Default | Built-in empty state |

***

### errorView

Custom component displayed when an error occurs.

|         |                      |
| ------- | -------------------- |
| Type    | `JSX.Element`        |
| Default | Built-in error state |

Hidden when `hideError={true}`.

***

### group

The group whose members are fetched and displayed. **Required.**

|         |                   |
| ------- | ----------------- |
| Type    | `CometChat.Group` |
| Default | —                 |

***

### groupMemberRequestBuilder

Controls which members load and in what order.

|         |                                        |
| ------- | -------------------------------------- |
| Type    | `CometChat.GroupMembersRequestBuilder` |
| Default | SDK default (30 per page)              |

Pass the builder instance, not the result of `.build()`.

***

### headerView

Custom component rendered as the entire header bar.

|         |                            |
| ------- | -------------------------- |
| Type    | `JSX.Element`              |
| Default | Built-in header with title |

***

### hideBanMemberOption

Hides the option to ban a member from the group.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideError

Hides the default and custom error views.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideKickMemberOption

Hides the option to kick a member from the group.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideScopeChangeOption

Hides the option to change the scope of a group member.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideSearch

Hides the default search bar.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideUserStatus

Hides the user's online/offline status indicator.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### itemView

Custom renderer for the entire list item row.

|         |                                                       |
| ------- | ----------------------------------------------------- |
| Type    | `(groupMember: CometChat.GroupMember) => JSX.Element` |
| Default | Built-in list item                                    |

***

### leadingView

Custom renderer for the avatar / left section.

|         |                                                       |
| ------- | ----------------------------------------------------- |
| Type    | `(groupMember: CometChat.GroupMember) => JSX.Element` |
| Default | Built-in avatar                                       |

***

### loadingView

Custom component displayed during the loading state.

|         |                  |
| ------- | ---------------- |
| Type    | `JSX.Element`    |
| Default | Built-in shimmer |

***

### onEmpty

Callback fired when the member list is empty.

|         |              |
| ------- | ------------ |
| Type    | `() => void` |
| Default | `undefined`  |

***

### onError

Callback fired when the component encounters an error.

|         |                                                           |
| ------- | --------------------------------------------------------- |
| Type    | `((error: CometChat.CometChatException) => void) \| null` |
| Default | `undefined`                                               |

***

### onItemClick

Callback fired when a member row is clicked.

|         |                                                |
| ------- | ---------------------------------------------- |
| Type    | `(groupMember: CometChat.GroupMember) => void` |
| Default | `undefined`                                    |

***

### onSelect

Callback fired when a member is selected/deselected. Requires `selectionMode` to be set.

|         |                                                                   |
| ------- | ----------------------------------------------------------------- |
| Type    | `(groupMember: CometChat.GroupMember, selected: boolean) => void` |
| Default | `undefined`                                                       |

***

### options

Custom context menu / hover actions for each member item.

|         |                                                                                     |
| ------- | ----------------------------------------------------------------------------------- |
| Type    | `(group: CometChat.Group, groupMember: CometChat.GroupMember) => CometChatOption[]` |
| Default | `undefined`                                                                         |

***

### searchKeyword

Pre-fills the search and filters the member list.

|         |          |
| ------- | -------- |
| Type    | `string` |
| Default | `""`     |

***

### searchRequestBuilder

Controls filtering when the search bar is active.

|         |                                        |
| ------- | -------------------------------------- |
| Type    | `CometChat.GroupMembersRequestBuilder` |
| Default | `undefined`                            |

***

### selectionMode

Enables single or multi-select checkboxes on list items.

|         |                      |
| ------- | -------------------- |
| Type    | `SelectionMode`      |
| Default | `SelectionMode.none` |

```ts lines theme={null}
enum SelectionMode {
  single,    // 0
  multiple,  // 1
  none,      // 2
}
```

***

### showScrollbar

Shows the scrollbar in the member list.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### subtitleView

Custom renderer for the subtitle text.

|         |                                                       |
| ------- | ----------------------------------------------------- |
| Type    | `(groupMember: CometChat.GroupMember) => JSX.Element` |
| Default | Built-in subtitle                                     |

***

### titleView

Custom renderer for the name / title text.

|         |                                                       |
| ------- | ----------------------------------------------------- |
| Type    | `(groupMember: CometChat.GroupMember) => JSX.Element` |
| Default | Built-in title                                        |

***

### trailingView

Custom renderer for the right section (scope badge / actions).

|         |                                                       |
| ------- | ----------------------------------------------------- |
| Type    | `(groupMember: CometChat.GroupMember) => JSX.Element` |
| Default | Built-in trailing view                                |

***

## Events

| Event                                            | Payload                    | Fires when           |
| ------------------------------------------------ | -------------------------- | -------------------- |
| `CometChatGroupEvents.ccGroupMemberKicked`       | `IGroupMemberKickedBanned` | Member kicked        |
| `CometChatGroupEvents.ccGroupMemberBanned`       | `IGroupMemberKickedBanned` | Member banned        |
| `CometChatGroupEvents.ccGroupMemberScopeChanged` | `IGroupMemberScopeChanged` | Member scope changed |
| `CometChatGroupEvents.ccGroupMemberAdded`        | `IGroupMemberAdded`        | Members added        |

All events are RxJS `Subject` instances. Subscribe with `.subscribe()`, unsubscribe with the returned subscription's `.unsubscribe()`.

***

## CSS Selectors

| Target                  | Selector                                                                  |
| ----------------------- | ------------------------------------------------------------------------- |
| Root                    | `.cometchat-group-members`                                                |
| Header title            | `.cometchat-group-members .cometchat-list__header-title`                  |
| List item               | `.cometchat-group-members .cometchat-list-item`                           |
| Body title              | `.cometchat-group-members .cometchat-list-item__body-title`               |
| Trailing view           | `.cometchat-group-members .cometchat-list-item__trailing-view`            |
| Scope badge             | `.cometchat-group-members__trailing-view-options`                         |
| Admin scope badge       | `.cometchat-group-members__trailing-view-options-admin`                   |
| Owner scope badge       | `.cometchat-group-members__trailing-view-options-owner`                   |
| Participant scope badge | `.cometchat-group-members__trailing-view-options-participant`             |
| Online status           | `.cometchat-group-members__list-item-online .cometchat-list-item__status` |
| Scope change dropdown   | `.cometchat-group-members .cometchat-menu-list__sub-menu`                 |
| Scope change list       | `.cometchat-group-members .cometchat-menu-list__sub-menu-list`            |
| Empty state             | `.cometchat-group-members__empty-state-view`                              |
| Empty state title       | `.cometchat-group-members__empty-state-view-body-title`                   |
| Error state             | `.cometchat-group-members__error-state-view`                              |
| Error state title       | `.cometchat-group-members__error-state-view-body-title`                   |
| Shimmer loading         | `.cometchat-group-members__shimmer`                                       |
| Backdrop                | `.cometchat-group-members__backdrop`                                      |