Overview

Browse all prebuilt UI components in the CometChat React UI Kit — conversations, messages, users, groups, calls, search, and AI.

AI Agent Component Spec

Field	Value
Package	@cometchat/chat-uikit-react
Required setup	CometChatUIKit.init() + CometChatUIKit.login() before rendering any component
Callback actions	on<Event>={(param) => {}}
Data filtering	<entity>RequestBuilder={new CometChat.<Entity>RequestBuilder()}
Toggle features	hide<Feature>={true} or show<Feature>={true}
Custom rendering	<slot>View={(<params>) => JSX}
CSS overrides	Target .cometchat-<component> class in global CSS
Calling	Requires separate @cometchat/calls-sdk-javascript package

Architecture

The UI Kit is a set of independent components that compose into chat layouts. A typical two-panel layout uses four core components:

• CometChatConversations — sidebar listing recent conversations (users and groups)
• CometChatMessageHeader — toolbar showing avatar, name, online status, and typing indicator
• CometChatMessageList — scrollable message feed with reactions, receipts, and threads
• CometChatMessageComposer — rich text input with attachments, mentions, and voice notes

Data flow: selecting a conversation in CometChatConversations yields a CometChat.User or CometChat.Group object. That object is passed as a prop (user or group) to CometChatMessageHeader, CometChatMessageList, and CometChatMessageComposer. The message components use the SDK internally — CometChatMessageComposer sends messages, CometChatMessageList receives them via real-time listeners.

Components communicate through a publish/subscribe event bus (CometChatMessageEvents, CometChatConversationEvents, CometChatGroupEvents, etc.). A component emits events that other components or application code can subscribe to without direct references. See Events for the full list.

Each component accepts callback props (on<Event>), view slot props (<slot>View) for replacing UI sections, RequestBuilder props for data filtering, and CSS variable overrides on .cometchat-<component> classes.

---

Component Catalog

All components are imported from @cometchat/chat-uikit-react.

Conversations and Lists

Component	Purpose	Key Props	Page
CometChatConversations	Scrollable list of recent conversations	conversationsRequestBuilder, onItemClick, onError	Conversations
CometChatUsers	Scrollable list of users	usersRequestBuilder, onItemClick, onError	Users
CometChatGroups	Scrollable list of groups	groupsRequestBuilder, onItemClick, onError	Groups
CometChatGroupMembers	Scrollable list of group members	group, groupMemberRequestBuilder, onItemClick	Group Members

Messages

Component	Purpose	Key Props	Page
CometChatMessageHeader	Toolbar with avatar, name, status, typing indicator	user, group, enableAutoSummaryGeneration	Message Header
CometChatMessageList	Scrollable message list with reactions, receipts, threads	user, group, messagesRequestBuilder, goToMessageId (string)	Message List
CometChatMessageComposer	Rich text input with attachments, mentions, voice notes	user, group, onSendButtonClick, placeholderText	Message Composer
CometChatMessageTemplate	Pre-defined structure for custom message bubbles	type, category, contentView, headerView, footerView	Message Template
CometChatThreadHeader	Parent message bubble and reply count for threaded view	parentMessage, onClose, hideReceipts, textFormatters	Thread Header

Calling

Component	Purpose	Key Props	Page
CometChatCallButtons	Voice and video call initiation buttons	user, group, onVoiceCallClick, onVideoCallClick	Call Buttons
CometChatIncomingCall	Incoming call notification with accept/decline	call, onAccept(call), onDecline(call)	Incoming Call
CometChatOutgoingCall	Outgoing call screen with cancel control	call, onCloseClicked	Outgoing Call
CometChatCallLogs	Scrollable list of call history	callLogsRequestBuilder, onItemClick	Call Logs

Search and AI

Component	Purpose	Key Props	Page
CometChatSearch	Real-time search across conversations and messages	onConversationClicked(conversation, searchKeyword?), onMessageClicked(message, searchKeyword?), uid, guid, textFormatters	Search
CometChatAIAssistantChat	AI agent chat with streaming, suggestions, history	user, onSendButtonClick(message, previewMessageMode?), aiAssistantTools	AI Assistant Chat

Component API Pattern

All components share a consistent API surface.

Actions

Actions control component behavior. They split into two categories:

Predefined Actions are built into the component and execute automatically on user interaction (e.g., clicking send dispatches the message). No configuration needed.

User-Defined Actions are callback props that fire on specific events. Override them to customize behavior:

<CometChatMessageList
  user={chatUser}
  onThreadRepliesClick={(message) => openThreadPanel(message)}
  onError={(error) => logError(error)}
/>

Events

Events enable decoupled communication between components. A component emits events that other parts of the application can subscribe to without direct references.

import { CometChatMessageEvents } from "@cometchat/chat-uikit-react";

const sub = CometChatMessageEvents.ccMessageSent.subscribe((message) => {
  // react to sent message
});

// cleanup
sub?.unsubscribe();

Each component page documents its emitted events in the Events section.

Filters

List-based components accept RequestBuilder props to control which data loads:

<CometChatMessageList
  user={chatUser}
  messagesRequestBuilder={
    new CometChat.MessagesRequestBuilder().setLimit(20)
  }
/>

Custom View Slots

Components expose named view slots to replace sections of the default UI:

<CometChatMessageHeader
  user={chatUser}
  titleView={<CustomTitle />}
  subtitleView={<CustomSubtitle />}
  leadingView={<CustomAvatar />}
/>

CSS Overrides

Every component has a root CSS class (.cometchat-<component>) for style customization:

.cometchat-message-list .cometchat-text-bubble__body-text {
  font-family: "SF Pro";
}

---

Next Steps

Core Features

Chat features included out of the box

Theming

Customize colors, fonts, and styles

Extensions

Add-on features like polls, stickers, and translation

Guides

Task-oriented tutorials for common patterns