> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-react-v7-feature-guides.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Group Members

> Scrollable list of members for a specific group with role-based actions like kick, ban, and scope change.

<Accordion title="AI Integration Quick Reference">
  | Field                     | Value                                                                                                                                                                                                                           |
  | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | Component                 | `CometChatGroupMembers`                                                                                                                                                                                                         |
  | Package                   | `@cometchat/chat-uikit-react`                                                                                                                                                                                                   |
  | Import                    | `import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";`                                                                                                                                                          |
  | CSS root class            | `.cometchat-group-members`                                                                                                                                                                                                      |
  | Primary output            | `onItemClick: (member: CometChat.GroupMember) => void` — emits the selected group member                                                                                                                                        |
  | Prerequisites             | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user                                                                                                                |
  | Stitching                 | Pass the target `group`; wire `onItemClick` (or `onSelect` in selection mode) to act on a member                                                                                                                                |
  | Events received           | `ui:group/member-added`, `ui:group/member-kicked`, `ui:group/member-banned`, `ui:group/member-scope-changed`, `ui:group/ownership-changed` — keeps the member list in sync — see the [Event System](/ui-kit/react/event-system) |
  | SDK listeners (automatic) | Group membership changes (joins, leaves, kicks, bans, scope changes) — handled internally                                                                                                                                       |
  | Full props                | See [Props](#props)                                                                                                                                                                                                             |
</Accordion>

## Overview

`CometChatGroupMembers` is a list component that renders all members of a specific group. It provides role-based actions (kick, ban, scope change) for admins and moderators, and emits the selected `CometChat.GroupMember` via `onItemClick`. Use it inside group details panels or as a standalone member management view.

<Info>
  **Live Preview** — interact with the default group members list.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-groups-cometchat-group-members--default)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-groups-cometchat-group-members--default&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "700px", border: "1px solid #e0e0e0"}} title="CometChat Group Members — Default" allow="clipboard-write" />

The component handles:

* Paginated fetching with infinite scroll
* Real-time membership updates (joins, leaves, kicks, bans, scope changes)
* Search filtering
* Role-based action menus (kick, ban, change scope)
* Selection mode (single/multiple)

***

## Usage

### Flat API

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

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

### Compound Composition

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

function MemberList({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers.Root group={group} onItemClick={handleClick} onBack={goBack}>
      <CometChatGroupMembers.Header title="Members" />
      <CometChatGroupMembers.SearchBar placeholder="Search members..." />
      <CometChatGroupMembers.LoadingState />
      <CometChatGroupMembers.ErrorState />
      <CometChatGroupMembers.EmptyState>
        <p>No members found.</p>
      </CometChatGroupMembers.EmptyState>
      <CometChatGroupMembers.List />
    </CometChatGroupMembers.Root>
  );
}
```

### Group Details Example

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

function GroupDetailsPanel({ group }: { group: CometChat.Group }) {
  const [selectedMember, setSelectedMember] = useState<
    CometChat.GroupMember | undefined
  >();

  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <div style={{ width: 320 }}>
        <CometChatGroupMembers
          group={group}
          onItemClick={(member) => setSelectedMember(member)}
          onBack={() => navigateBack()}
        />
      </div>
      {selectedMember && (
        <div style={{ flex: 1 }}>
          {/* Show member profile or start DM */}
        </div>
      )}
    </div>
  );
}
```

***

## Filtering

Pass a `CometChat.GroupMembersRequestBuilder` to `groupMemberRequestBuilder` to control which members load. Pass the builder instance — not the result of `.build()`. Refer to [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) for the full builder API.

```tsx theme={null}
<CometChatGroupMembers
  group={group}
  groupMemberRequestBuilder={
    new CometChat.GroupMembersRequestBuilder(group.getGuid())
      .setLimit(15)
      .setScopes(["admin", "moderator"])
  }
/>
```

### Search

The component includes a built-in search bar. When the user types, it fetches matching members from the server. For custom search behavior, pass a `searchRequestBuilder`:

```tsx theme={null}
<CometChatGroupMembers
  group={group}
  searchRequestBuilder={
    new CometChat.GroupMembersRequestBuilder(group.getGuid())
      .setLimit(30)
      .setSearchKeyword("")
  }
/>
```

### Filter Recipes

| Recipe              | Code                                                                               |
| ------------------- | ---------------------------------------------------------------------------------- |
| Only admins         | `new CometChat.GroupMembersRequestBuilder(guid).setScopes(["admin"])`              |
| Admins & moderators | `new CometChat.GroupMembersRequestBuilder(guid).setScopes(["admin", "moderator"])` |
| Limit page size     | `new CometChat.GroupMembersRequestBuilder(guid).setLimit(10)`                      |

***

## Actions and Events

### Callback Props

| Prop          | Signature                                                    | Fires when                                  |
| ------------- | ------------------------------------------------------------ | ------------------------------------------- |
| `onItemClick` | `(member: CometChat.GroupMember) => void`                    | User clicks a member item                   |
| `onSelect`    | `(member: CometChat.GroupMember, selected: boolean) => void` | Member selected/deselected (selection mode) |
| `onError`     | `((error: CometChat.CometChatException) => void) \| null`    | SDK error occurs                            |
| `onEmpty`     | `() => void`                                                 | List is empty after initial fetch           |
| `onBack`      | `() => void`                                                 | Back button is clicked                      |

### Events Emitted

This component does not emit any UI events directly. Kick, ban, and scope change actions are handled by internal action handlers that publish their own events.

### Events Received

UI events this component subscribes to (published by other components). These flow through the shared UI event bus — see [Event System → User & Group Actions](/ui-kit/react/event-system#user--group-actions) for how these `ui:group/member-*` and `ui:group/ownership-changed` events are published.

| Event                           | Payload                                 | Behavior                                                                           |
| ------------------------------- | --------------------------------------- | ---------------------------------------------------------------------------------- |
| `ui:group/member-added`         | `{ group, members, messages }`          | Adds new members to the list                                                       |
| `ui:group/member-kicked`        | `{ group, user, message }`              | Removes the kicked member from the list                                            |
| `ui:group/member-banned`        | `{ group, user, message }`              | Removes the banned member from the list                                            |
| `ui:group/member-scope-changed` | `{ group, user, newScope }`             | Updates the member's scope/role display                                            |
| `ui:group/ownership-changed`    | `{ group, newOwner, previousOwnerUid }` | Updates the new owner's scope to "owner" and demotes the previous owner to "admin" |

### SDK Listeners (Automatic)

These SDK listeners are attached internally. The component updates its state automatically — no manual subscription needed:

* Groups: `onGroupMemberJoined`, `onGroupMemberLeft`, `onGroupMemberKicked`, `onGroupMemberBanned`, `onGroupMemberScopeChanged`, `onMemberAddedToGroup`

***

## Customization

### View Props

Use view props to replace sections of the default UI while keeping the component's behavior intact:

```tsx theme={null}
<CometChatGroupMembers
  group={group}
  headerView={<MyCustomHeader />}
  itemView={(member) => <MyCustomMemberItem member={member} />}
  emptyView={<EmptyState />}
  loadingView={<Skeleton />}
  errorView={<ErrorBanner />}
/>
```

| Slot           | Signature               | Replaces                  |
| -------------- | ----------------------- | ------------------------- |
| `itemView`     | `(member) => ReactNode` | Entire member row         |
| `leadingView`  | `(member) => ReactNode` | Avatar section            |
| `titleView`    | `(member) => ReactNode` | Member name               |
| `subtitleView` | `(member) => ReactNode` | Status / role text        |
| `trailingView` | `(member) => ReactNode` | Scope badge + action menu |
| `headerView`   | `ReactNode`             | Header area               |
| `loadingView`  | `ReactNode`             | Loading shimmer           |
| `emptyView`    | `ReactNode`             | Empty state               |
| `errorView`    | `ReactNode`             | Error state               |

#### itemView

Replace the entire list item row.

Default:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-react-v7-feature-guides/dyQvqKpab345mPRM/images/a4ba8be1-group_members_listitemview_default_web_screens-5b8840bd6f3ce2799707ce7ea2951e89.png?fit=max&auto=format&n=dyQvqKpab345mPRM&q=85&s=3fef9982016de7127c783696c300ba1d" 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-react-v7-feature-guides/UTHakZZlcsXV4ShY/images/e0d9b4dc-group_members_listitemview_custom_web_screens-c804cdfd10e7e040c95f65ecfa045421.png?fit=max&auto=format&n=UTHakZZlcsXV4ShY&q=85&s=e8afd6d61acb84c00ef6d91c401b92aa" width="1280" height="800" data-path="images/e0d9b4dc-group_members_listitemview_custom_web_screens-c804cdfd10e7e040c95f65ecfa045421.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx 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.Root image={member.getAvatar()} name={member.getName()}>
                <CometChatAvatar.Image />
                <CometChatAvatar.Initials />
              </CometChatAvatar.Root>
            </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 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%;
    }

    .cometchat-avatar, .cometchat-avatar__image {
      border-radius: 10px;
    }

    .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-react-v7-feature-guides/SmHj5Xejh0y_wLWD/images/61f20b67-group_members_subtitleview_default_web_screens-9f5cd5b191f8d3dfdec49a6cd0997c55.png?fit=max&auto=format&n=SmHj5Xejh0y_wLWD&q=85&s=7da3def1ae6452e62189453374dd14df" 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-react-v7-feature-guides/pMTSNstPlVCXICAh/images/923f8e60-group_members_subtitleview_custom_web_screens-805d87b822b312ce9afd8aaee10ae20d.png?fit=max&auto=format&n=pMTSNstPlVCXICAh&q=85&s=6e065d132b0d8262a3bf23a6083abc60" width="1280" height="800" data-path="images/923f8e60-group_members_subtitleview_custom_web_screens-805d87b822b312ce9afd8aaee10ae20d.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx 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 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-react-v7-feature-guides/qp24vnUCPvwoivgU/images/77b0d08c-group_members_tailview_default_web_screens-9f5cd5b191f8d3dfdec49a6cd0997c55.png?fit=max&auto=format&n=qp24vnUCPvwoivgU&q=85&s=351f2b320e9211c4bcb8ce7d8047adc1" 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-react-v7-feature-guides/IqQURLV9eVonHjGU/images/1c4e58ee-group_members_tailview_custom_web_screens-055d509a3005e4999becda952d9001e3.png?fit=max&auto=format&n=IqQURLV9eVonHjGU&q=85&s=31890101786b4e6d2de913b9ae9f0b68" width="1280" height="800" data-path="images/1c4e58ee-group_members_tailview_custom_web_screens-055d509a3005e4999becda952d9001e3.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx 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 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-react-v7-feature-guides/LWHLuxjDRwyZnd2z/images/b33f809d-group_member_headerview-234678815906bbb7e26ae2bddb71f972.png?fit=max&auto=format&n=LWHLuxjDRwyZnd2z&q=85&s=884a32ec08da9b3d04563174a24cf2ea" width="1280" height="330" data-path="images/b33f809d-group_member_headerview-234678815906bbb7e26ae2bddb71f972.png" />
</Frame>

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

    function CustomHeaderMembers({ group }: { group: CometChat.Group }) {
      const { getLocalizedString } = useLocale();

      return (
        <CometChatGroupMembers
          group={group}
          headerView={
            <div className="group-members__header">
              <div className="group-members__header__title">
                {getLocalizedString("group_members")}
              </div>
              <CometChatButton.Root onClick={() => { /* handle click */ }}>
                <CometChatButton.Icon />
              </CometChatButton.Root>
            </div>
          }
        />
      );
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css 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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-react-v7-feature-guides/qp24vnUCPvwoivgU/images/7ce43a63-group_members_options_web_screens-c7a97fe4857af207bf473eb087d15f65.png?fit=max&auto=format&n=qp24vnUCPvwoivgU&q=85&s=485b1bcf0789b2836659834e633ac32e" width="1280" height="539" data-path="images/7ce43a63-group_members_options_web_screens-c7a97fe4857af207bf473eb087d15f65.png" />
</Frame>

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

    function CustomOptionsMembers({ group }: { group: CometChat.Group }) {
      const getOptions = (member: CometChat.GroupMember): CometChatGroupMemberOption[] => [
        {
          id: "kick",
          title: "Kick User",
          onClick: (m) => { /* kick logic */ },
        },
      ];

      return <CometChatGroupMembers group={group} options={getOptions} />;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css 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>

### Compound Composition

For full layout control, use sub-components. Omit any sub-component to hide it:

```tsx theme={null}
<CometChatGroupMembers.Root group={group} onItemClick={handleClick}>
  {/* No Header or SearchBar — they won't render */}
  <CometChatGroupMembers.List />
</CometChatGroupMembers.Root>
```

Available sub-components:

| Sub-component  | Description                    | Props                                                      | Flat API equivalent |
| -------------- | ------------------------------ | ---------------------------------------------------------- | ------------------- |
| `Root`         | Context provider and container | All Root props + `children`                                | —                   |
| `List`         | Scrollable member list         | `itemView`                                                 | `itemView`          |
| `Item`         | Individual member row          | `leadingView`, `titleView`, `subtitleView`, `trailingView` | Per-item view props |
| `Header`       | Header area                    | `title`, `children`                                        | `headerView`        |
| `SearchBar`    | Search input                   | `placeholder`                                              | —                   |
| `EmptyState`   | Empty state                    | `children`                                                 | `emptyView`         |
| `ErrorState`   | Error state                    | `children`                                                 | `errorView`         |
| `LoadingState` | Loading shimmer                | `children`                                                 | `loadingView`       |

### CSS Styling

Override design tokens on the component selector:

```css theme={null}
.cometchat-group-members {
  --cometchat-background-color-01: #1a1a2e;
  --cometchat-text-color-primary: #ffffff;
}

.cometchat-group-members__item-scope {
  color: var(--cometchat-primary-color);
  font-weight: 600;
}
```

***

## Props

All props are optional unless marked **Required**.

<Note>
  View slot props (`headerView`, `loadingView`, `emptyView`, `errorView`, `itemView`, `leadingView`, `titleView`, `subtitleView`, `trailingView`) are convenience props available only on the flat API. The search input is the `SearchBar` sub-component (with a `placeholder` prop), not a view slot. In compound composition mode, use the corresponding sub-components directly.
</Note>

***

### group

**Required.** The group whose members to display.

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

<Note>
  `group` is required — the component renders nothing without it. Obtain the `CometChat.Group` from the selected item in `CometChatGroups` (`onItemClick`), from `CometChat.getGroup(guid)`, or from your own state, then pass it in. See the [Group Chat Setup guide](/ui-kit/react/guide-group-chat-setup) for how the group flows from selection into the members panel.
</Note>

***

### groupMemberRequestBuilder

Custom request builder for fetching group members. Controls pagination, filtering, and sorting.

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

***

### searchRequestBuilder

Custom request builder used specifically when the user searches. Separate from the main builder.

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

***

### searchKeyword

Initial search keyword to pre-filter members on mount.

|         |             |
| ------- | ----------- |
| Type    | `string`    |
| Default | `undefined` |

***

### hideUserStatus

Hide the online/offline status indicator on member avatars.

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

***

### hideSearch

Hide the search bar entirely.

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

***

### hideKickMemberOption

Hide the "Kick Member" option from the action menu (even for admins/owners).

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

***

### hideBanMemberOption

Hide the "Ban Member" option from the action menu (even for admins/owners).

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

***

### hideScopeChangeOption

Hide the "Change Scope" option from the action menu (even for admins/owners).

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

***

### showScrollbar

Show the native scrollbar on the member list.

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

***

### selectionMode

Enable selection mode for single or multi-select operations.

|         |                                    |
| ------- | ---------------------------------- |
| Type    | `'none' \| 'single' \| 'multiple'` |
| Default | `'none'`                           |

***

### options

Function that returns context menu options for each member item (shown on hover/swipe). Overrides the default kick/ban/scope options.

|         |                                                                            |
| ------- | -------------------------------------------------------------------------- |
| Type    | `(member: CometChat.GroupMember) => CometChatGroupMemberOption[]`          |
| Default | Default options (kick, ban, change scope — based on logged-in user's role) |

```tsx theme={null}
<CometChatGroupMembers
  group={group}
  options={(member) => [
    {
      id: "message",
      title: "Message Privately",
      iconURL: messageIcon,
      onClick: (m) => openDirectMessage(m),
    },
    {
      id: "remove",
      title: "Remove",
      iconURL: removeIcon,
      onClick: (m) => kickMember(m),
    },
  ]}
/>
```

<Note>
  These `onClick` handlers are placeholders — the component only renders the menu items; you must implement the behavior. For the "Message Privately" option, open a one-on-one chat with the selected member as shown in the [Message Privately guide](/ui-kit/react/guide-message-privately). Kick, ban, and scope-change actions are handled by the component's built-in options unless you override them here.
</Note>

***

### onItemClick

Callback when a member item is clicked.

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

***

### onSelect

Callback when a member is selected or deselected (only fires in selection mode).

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

***

### onError

Callback when an SDK error occurs during fetch or real-time operations.

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

***

### onEmpty

Callback when the member list is empty after the initial fetch completes.

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

***

### onBack

Callback when the back button in the header is clicked.

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

<Note>
  `onBack` is a placeholder — the component only renders the back button and invokes this callback. Navigation and layout wiring (closing the panel, returning to the group chat, updating your router) are your app's responsibility. The [Group Chat Setup guide](/ui-kit/react/guide-group-chat-setup) shows how the members panel is wired into the surrounding layout.
</Note>

***

## CSS Selectors

| Target         | Selector                                  |
| -------------- | ----------------------------------------- |
| Root container | `.cometchat-group-members`                |
| Header         | `.cometchat-group-members__header`        |
| Search bar     | `.cometchat-group-members__search-bar`    |
| List container | `.cometchat-group-members__list`          |
| Member item    | `.cometchat-group-members__item`          |
| Scope badge    | `.cometchat-group-members__item-scope`    |
| Empty state    | `.cometchat-group-members__empty-state`   |
| Error state    | `.cometchat-group-members__error-state`   |
| Loading state  | `.cometchat-group-members__loading-state` |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Groups" icon="users" href="/ui-kit/react/components/groups">
    Browse and select groups
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/react/theming">
    Customize colors, fonts, and spacing
  </Card>
</CardGroup>