Customizing Your UI Kit Builder

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

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

The exported code uses the React UI Kit, so every React UI Kit component, prop, and customization layer applies here. In Next.js, any file that renders these components or calls the CometChat SDK must be a Client Component — add "use client"; as the first line, and keep it inside the SSR-disabled boundary set up in the Integration Guide. The chatUser variable in the examples below is a CometChat.User you fetch from the SDK, as shown in the next section.

---

Getting a chatUser Reference

Several examples below pass a chatUser prop. This is a CometChat.User object you fetch from the SDK after login. Fetch it in a Client Component with CometChat.getUser():

"use client";

import { useEffect, useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function useChatUser(uid: string) {
  const [chatUser, setChatUser] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser(uid).then((user) => setChatUser(user));
  }, [uid]);

  return chatUser;
}

Render the component only once chatUser is defined, for example chatUser ? <CometChatMessageList user={chatUser} /> : null. The same applies to a group prop fetched with CometChat.getGroup().

---

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

"use client";

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

"use client";

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

"use client";

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;
}

---

Customization Layers

Component props are one of several ways to tailor the exported chat. Each layer operates independently, so you can combine them:

Layer	What it changes	Where
Feature toggles	Enable/disable features	CometChatSettings.ts
Component props & slot views	Per-component behavior and custom views (the examples above)	Components Overview
Message templates	How individual message bubbles render	Message Template
Theme overrides	Colors, fonts, dark mode via the theme system	Theming
CSS variables	Fine-grained styling via --cometchat-* tokens	Color Resources

---

Next Steps

UI Kit Builder Settings

Configure feature toggles and behavior

Components Overview

Explore all available UI components

Message Template

Customize how message bubbles render

Theming

Customize colors, typography, and styling

CSS Variables

Override --cometchat-* design tokens

Localization

Add multi-language support