Overview

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

Browse and understand the full set of CometChat React UI Kit components. This page is for developers who need a quick, accurate map of what to import and where to start.

When to use this

• You need a list of all available UI Kit components.
• You want to know which component maps to a specific feature.
• You want to understand the common API patterns across components.
• You need to find related pages for customization and theming.

Usage

Component import pattern

• What you’re changing: Import the UI Kit components you plan to render.
• File: Any React module (for example src/App.tsx)
• Applies to: UI Kit component imports
• Default behavior: Components are available for JSX use.
• Override: Import only what you need.
• Verify: The import compiles and components render.

import {
  CometChatConversations,
  CometChatMessageList,
  CometChatMessageComposer,
  CometChatMessageHeader,
} from "@cometchat/chat-uikit-react";

What this does: Imports the core chat components.

Actions

• What you’re changing: Override component behavior via callbacks.
• Where to change it: Component props in JSX
• Applies to: Any component that exposes on<Event> props
• Default behavior: Predefined actions run automatically.
• Override: Provide your own handler using on<Event>={(param) => {}}.
• Verify: Your callback fires on interaction.

Example pattern:

<CometChatConversations onItemClick={(conversation) => console.log(conversation)} />

What this does: Logs the conversation when a user selects a list item.

Events

• What you’re changing: Listen to UI Kit events to coordinate UI.
• Where to change it: Your app-level state or event handlers
• Applies to: UI Kit events emitted by components
• Default behavior: Components emit events on state changes.
• Override: Subscribe where needed to respond.
• Verify: Your app updates when events emit.

Customization matrix

What you want to change	Where	Property/API	Example
Override behavior on user interaction	Component props	on<Event>	onItemClick={(c) => setActive(c)}
Hide a built-in feature	Component props	hide<Feature>	hideReceipts={true}
Filter or request data	Component props	<entity>RequestBuilder	messagesRequestBuilder={new CometChat.MessagesRequestBuilder()}
Custom render slots	Component props	<slot>View	titleView={() => <MyTitle />}
Component theming	Global CSS	.cometchat-<component>	.cometchat-conversations { --cometchat-primary-color: #f76808; }

Common pitfalls and fixes

Symptom	Cause	Fix
Components render blank	CometChatUIKit.init() or login() not called	Initialize and log in before rendering components.
Call UI missing	Calls SDK not installed	Install @cometchat/calls-sdk-javascript.
Custom view not appearing	JSX returns null or undefined	Return a valid JSX element from the view prop.
Callback not firing	Wrong prop name	Use the exact on<Event> prop name from the component page.
Styles not applying	CSS Modules used	Use global CSS and .cometchat selectors.

FAQ

Do I need to import every component? No. Import only the components you render.

Where do I find component-specific props and actions? Open the individual component pages linked above.