> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Customizing Your UI Kit Builder

> Customize CometChat UI Kit Builder components — modify props, styling, and behavior.

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:

```jsx theme={null}
<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:

```jsx theme={null}
<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](/ui-kit/react/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](/ui-kit/react/message-list) → [`stickyDateTimeFormat`](/ui-kit/react/message-list#sticky-datetime-format)

```jsx lines theme={null}
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} />;
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/GrDbzzq1LLfv-sgw/images/866c29ec-sticky-date-format-example-45f654db48bb75901329ba794804cbf9.png?fit=max&auto=format&n=GrDbzzq1LLfv-sgw&q=85&s=77cb8670f47219e701fc205cf5edbc40" width="1278" height="710" data-path="images/866c29ec-sticky-date-format-example-45f654db48bb75901329ba794804cbf9.png" />
</Frame>

**Default format** (for reference):

```javascript lines theme={null}
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](/ui-kit/react/conversations) → [`subtitleView`](/ui-kit/react/conversations#subtitleview)

```jsx lines theme={null}
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](/ui-kit/react/message-composer) → [`sendButtonView`](/ui-kit/react/message-composer#sendbuttonview)

```jsx lines theme={null}
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} />;
```

```css lines theme={null}
/* 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**

<CardGroup cols={2}>
  <Card title="UI Kit Builder Settings" href="/chat-builder/react/builder-settings">
    Configure feature toggles and behavior
  </Card>

  <Card title="Components Overview" href="/ui-kit/react/components-overview">
    Explore all available UI components
  </Card>

  <Card title="Theming" href="/ui-kit/react/theme">
    Customize colors, typography, and styling
  </Card>

  <Card title="Localization" href="/ui-kit/react/localize">
    Add multi-language support
  </Card>
</CardGroup>