Customizing Your UI Kit Builder

Customize Next.js UI Kit Builder components by adjusting CometChat app props, styling, group messages, and behavior.

Your settings file, src/builder/cometchat-builder-settings.json, handles feature toggles, layout and theming — see UI Kit Builder Settings. This page covers what to do when you need more than a setting.

---

App-Level Customizations

React UI Kit v7 has no CometChatApp component. The app shell is src/app/CometChatNoSSR/CometChatAppShell.tsx, which is yours to edit, and it renders CometChatHome — where the app-level props live.

Prop	Type	Effect
loggedInUser	CometChat.User	The signed-in user. Required
onLogout	() => void	Called after logout; clear your own state here
defaultUser / defaultGroup	CometChat.User / CometChat.Group	Opens this conversation on mount, with or without autoOpenFirstItem. layout.chatType decides which of the two is read
autoOpenFirstItem	boolean	Selects an initial conversation on mount instead of showing the empty state. Defaults to false
defaultActiveTab	'chats' | 'calls' | 'users' | 'groups'	Tab selected on mount. Ignored unless the tab is present in layout.tabs
showGroupActionMessages	boolean	Whether “X added Y to the group” messages appear. There is no settings key for this — omit the prop and they show

<CometChatHome
  loggedInUser={loggedInUser}
  onLogout={handleLogout}
  autoOpenFirstItem
  defaultActiveTab="chats"
/>

Group Action Messages

Group action messages (joins, leaves, kicks, bans) have no settings key — the showGroupActionMessages prop above is the only way to change them from code, and they show when it is omitted. Whether they are generated at all is an app-level choice: go to Chat > Settings in the dashboard and switch Include Group Actions.

Opening a Specific Conversation

Pass defaultUser or defaultGroup. The named conversation opens on mount whether or not autoOpenFirstItem is set — that prop only controls what happens when you name nothing.

<CometChatHome
  loggedInUser={loggedInUser}
  onLogout={handleLogout}
  defaultUser={user}
/>

Which of the two is read depends on layout.chatType — always, not only when the sidebar is hidden. Under the default chatType: 'user' a defaultGroup is ignored, so set chatType: 'group' to open a group. See Builder Settings.

Upgrading from v6? showGroupActionMessages and autoOpenFirstItem were props on CometChatApp. They are now props on CometChatHome, and the rest of what CometChatApp did is settings plus your own app shell.

---

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,
  type CometChatDateFormatConfig,
} from "@cometchat/chat-uikit-react";

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

<CometChatMessageList user={chatUser} stickyDateTimeFormat={dateFormat} />;

Any key you leave out keeps the UI Kit’s own default, so a partial config is fine. today and yesterday default to localized strings rather than fixed text, which is why they follow the user’s language. The current defaults are listed with the component — see Message List.

---

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
    icon={<img src="/icons/brand-send.svg" alt="" />}
    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%;
}

The glyph’s colour comes from the SVG, not from CSS. .cometchat-button__icon is the wrapper around your <img>, so giving it a background paints a square behind the icon rather than colouring it.

---

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