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

​
Customization Workflow

  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
After modifying the UI Kit Builder, re-download and reintegrate the code package to apply changes.

​
Example: 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"
});

​
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