> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/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-docs-llms-scoped-indexes/tnt3e6K0Qzy3Jll4/images/fc565456-group_members_overview_web_screens-448397c54784d0c68f66dfdf98656483.png?fit=max&auto=format&n=tnt3e6K0Qzy3Jll4&q=85&s=2cdd197e6b6d1a9e3455d95938fce395" 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-docs-llms-scoped-indexes/ZaDaKVdnqtokXiZK/images/a4ba8be1-group_members_listitemview_default_web_screens-5b8840bd6f3ce2799707ce7ea2951e89.png?fit=max&auto=format&n=ZaDaKVdnqtokXiZK&q=85&s=cf091369d637e0d14d9108b53bbddc01" 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-docs-llms-scoped-indexes/l_1oaiAY9g221I2G/images/e0d9b4dc-group_members_listitemview_custom_web_screens-c804cdfd10e7e040c95f65ecfa045421.png?fit=max&auto=format&n=l_1oaiAY9g221I2G&q=85&s=d037b3e78a09f98b742552bb3eccd963" 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-docs-llms-scoped-indexes/zeinwsYvDYBDwir-/images/61f20b67-group_members_subtitleview_default_web_screens-9f5cd5b191f8d3dfdec49a6cd0997c55.png?fit=max&auto=format&n=zeinwsYvDYBDwir-&q=85&s=142af21a5cbcb4aee543f8f7de574851" 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-docs-llms-scoped-indexes/r25ELW0hqjkLLiGN/images/923f8e60-group_members_subtitleview_custom_web_screens-805d87b822b312ce9afd8aaee10ae20d.png?fit=max&auto=format&n=r25ELW0hqjkLLiGN&q=85&s=0bfb193332fb6ac6585b128885ff5aa7" 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-docs-llms-scoped-indexes/yGOD4hG5x8gw_zqp/images/77b0d08c-group_members_tailview_default_web_screens-9f5cd5b191f8d3dfdec49a6cd0997c55.png?fit=max&auto=format&n=yGOD4hG5x8gw_zqp&q=85&s=09a4d3ee0c157955c5fb1ee86dbaa27b" 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-docs-llms-scoped-indexes/K_p4Iy5Yo4hNoo1I/images/1c4e58ee-group_members_tailview_custom_web_screens-055d509a3005e4999becda952d9001e3.png?fit=max&auto=format&n=K_p4Iy5Yo4hNoo1I&q=85&s=077d4a7552919b4460028562ce4b0b4a" 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-docs-llms-scoped-indexes/d5xW_uJ3Iif7doR1/images/b33f809d-group_member_headerview-234678815906bbb7e26ae2bddb71f972.png?fit=max&auto=format&n=d5xW_uJ3Iif7doR1&q=85&s=6fbd24b2540b19cc6ae2d89291cc711e" 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-docs-llms-scoped-indexes/yGOD4hG5x8gw_zqp/images/7ce43a63-group_members_options_web_screens-c7a97fe4857af207bf473eb087d15f65.png?fit=max&auto=format&n=yGOD4hG5x8gw_zqp&q=85&s=4d4a6f5804614f856dc3513639ba1a17" 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-docs-llms-scoped-indexes/qatN8AZO7PJYofUv/images/0651a0d7-group_members_style_web_screens-23265ad899155117d9bb15ee54742665.png?fit=max&auto=format&n=qatN8AZO7PJYofUv&q=85&s=0618593e5b6621e9728b344a2e13e36d" 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` |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.