Skip to main content
The CometChatSettings.ts file handles basic feature toggles. For deeper customizations, modify component props or source code directly.

​
App-Level Customizations

These ready-to-use props on the CometChatApp component let you quickly adjust common behaviors without modifying any internal components.

​
Group Action Messages

Control the visibility of group action messages using the showGroupActionMessages prop: 
<CometChatApp showGroupActionMessages={true} />
  • true (default) — Group action messages are visible
  • false — Group action messages are hidden

​
Auto Open First Item

Control whether the first item in lists automatically opens on render using the autoOpenFirstItem prop: 
<CometChatApp autoOpenFirstItem={false} />
  • true (default) — The first item in conversation list, user list, or group list opens automatically on first render
  • false — No item opens until the user clicks on one

​
Component-Level Customizations

For more advanced customizations tailored to your app’s needs, you can modify individual UI Kit components directly.

​
How to Customize

  1. Find the component in the UI Kit Components Overview
  2. Check available props and customization options
  3. Update props or edit the component source code
Below are some examples to help you get started with common customizations like date formats, conversation subtitles, and send buttons.

​
Custom Date Format

Customize how sticky date headers appear in the message list. Component: Message List → stickyDateTimeFormat 
import {
  CometChatMessageList,
  CalendarObject,
} from "@cometchat/chat-uikit-react";

const dateFormat = new CalendarObject({
  today: "hh:mm A", // "10:30 AM"
  yesterday: "[Yesterday]",
  otherDays: "DD/MM/YYYY", // "25/05/2025"
});

<CometChatMessageList user={chatUser} stickyDateTimeFormat={dateFormat} />;
Default format (for reference): 
new CalendarObject({
  today: "today",
  yesterday: "yesterday",
  otherDays: "DD MMM, YYYY", // "25 Jan, 2025"
});

​
Custom Conversation Subtitle

Show online status or member count instead of the default last message preview. Component: Conversations → subtitleView 
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatConversations } from "@cometchat/chat-uikit-react";

const customSubtitleView = (conversation) => {
  if (conversation.getConversationType() === "user") {
    const user = conversation.getConversationWith();
    return (
      <span>{user.getStatus() === "online" ? "🟢 Online" : "⚫ Offline"}</span>
    );
  } else {
    const group = conversation.getConversationWith();
    return <span>{group.getMembersCount()} members</span>;
  }
};

<CometChatConversations subtitleView={customSubtitleView} />;

​
Custom Send Button

Replace the default send button with your brand’s icon. Component: Message Composer → sendButtonView 
import {
  CometChatMessageComposer,
  CometChatButton,
} from "@cometchat/chat-uikit-react";

const brandedSendButton = (
  <CometChatButton
    iconURL="/icons/brand-send.svg"
    onClick={() => {
      // Your custom send logic
    }}
  />
);

<CometChatMessageComposer user={chatUser} sendButtonView={brandedSendButton} />;

/* Style the custom send button */
.cometchat-message-composer .cometchat-button {
  background: #6852d6;
  border-radius: 50%;
}

.cometchat-message-composer .cometchat-button__icon {
  background: #ffffff;
}

​
Next Steps

UI Kit Builder Settings

Configure feature toggles and behavior

Components Overview

Explore all available UI components

Theming

Customize colors, typography, and styling

Localization

Add multi-language support