> ## 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 React Router 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](/docs/chat-builder/react-router/builder-settings). This page covers what to do when you need more than a setting.

***

## **App-Level Customizations**

[React UI Kit v7](/docs/ui-kit/react/overview) has no `CometChatApp` component. The app shell is `src/App.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 |

```tsx theme={null}
<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.

```tsx theme={null}
<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](/docs/chat-builder/react-router/builder-settings#3-layout-layout).

<Note>
  **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.tsx`.
</Note>

***

## **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](/docs/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](/docs/ui-kit/react/components/message-list) → [`stickyDateTimeFormat`](/docs/ui-kit/react/components/message-list#stickydatetimeformat)

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

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

<Note>
  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](/docs/ui-kit/react/components/message-list).
</Note>

***

### **Custom Conversation Subtitle**

Show online status or member count instead of the default last message preview.

**Component**: [Conversations](/docs/ui-kit/react/components/conversations) → [`subtitleView`](/docs/ui-kit/react/components/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](/docs/ui-kit/react/components/message-composer) → [`sendButtonView`](/docs/ui-kit/react/components/message-composer#sendbuttonview)

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

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

<Note>
  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.
</Note>

***

## **Next Steps**

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

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

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

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.