> ## 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 Angular UI Kit Builder components by adjusting cometchat-app inputs, styling, and component behavior.

The `cometchat-builder-settings.json` file handles basic feature toggles. For deeper customizations, use the component inputs or modify the exported source directly.

***

## **App-Level Customizations**

These inputs on the `<cometchat-app />` component let you adjust what the chat opens on, without modifying any internal components.

| Input | Type | Default | What it does |
| - | - | - | - |
| `user` | `CometChat.User` | `undefined` | Opens a one-to-one conversation with this user on load |
| `group` | `CometChat.Group` | `undefined` | Opens this group on load |
| `defaultActiveTab` | `'chats' \| 'calls' \| 'users' \| 'groups'` | `'chats'` | Which tab the sidebar starts on |

### **Start on a Specific Tab**

```html theme={null}
<cometchat-app [defaultActiveTab]="'groups'" />
```

### **Open a Specific Conversation**

```typescript src/app/app.component.ts theme={null}
import { Component, signal } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatAppComponent } from './cometchat-app.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CometChatAppComponent],
  template: `
    <div class="chat-container">
      <cometchat-app [user]="supportAgent()" />
    </div>
  `,
  styles: [`.chat-container { height: 100vh; }`],
})
export class AppComponent {
  readonly supportAgent = signal<CometChat.User | undefined>(undefined);

  constructor() {
    CometChat.getUser('cometchat-uid-2').then((u) => this.supportAgent.set(u));
  }
}
```

<Tip>
  Rebinding `user` or `group` switches conversation **without remounting**, so you can move the chat between conversations by changing the bound value rather than destroying and recreating the component.
</Tip>

<Note>
  When both `user` and `group` are bound, the Builder's `chatType` setting decides which one wins. Set it to `"user"` or `"group"` in your settings file.
</Note>

***

## **Component-Level Customizations**

For more advanced customizations, you can modify the UI Kit components used inside the exported code.

### **How to Customize**

1. Find the component in the [UI Kit Components Overview](/docs/ui-kit/angular/components/components-overview)
2. Check available inputs and customization options
3. Update inputs in the exported templates, or edit the component source

Angular's UI Kit takes custom views as **`TemplateRef` inputs** — you declare an `<ng-template>` and pass it in, rather than passing a render function.

Below are some examples to help you get started.

### **Custom Date Format**

Customize how sticky date headers appear in the message list.

**Component**: [Message List](/docs/ui-kit/angular/components/cometchat-message-list) → `stickyDateTimeFormat`

```typescript theme={null}
import { Component, Input } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatMessageListComponent } from '@cometchat/chat-uikit-angular';
import type { CalendarObject } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-custom-dates',
  standalone: true,
  imports: [CometChatMessageListComponent],
  template: `
    <cometchat-message-list
      [user]="chatUser"
      [stickyDateTimeFormat]="dateFormat"
    />
  `,
})
export class CustomDatesComponent {
  @Input() chatUser?: CometChat.User;

  // CalendarObject is an interface, so pass a plain object rather than `new`.
  dateFormat: CalendarObject = {
    today: 'hh:mm A',        // "10:30 AM"
    yesterday: '[Yesterday]',
    otherDays: 'DD/MM/YYYY', // "25/05/2025"
  };
}
```

**Default format** (for reference):

```typescript theme={null}
const defaultFormat: CalendarObject = {
  today: 'Today',
  yesterday: 'Yesterday',
  otherDays: 'DD MMM, YYYY', // "25 Jan, 2025"
};
```

<Tip>
  The message list also accepts `separatorDateTimeFormat`, `messageSentAtDateTimeFormat` and `messageInfoDateTimeFormat`. See [Date & Time Formatting](/docs/ui-kit/angular/customization/date-time-formatting).
</Tip>

***

### **Custom Conversation Subtitle**

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

**Component**: [Conversations](/docs/ui-kit/angular/components/cometchat-conversations) → `subtitleView`

```typescript theme={null}
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatConversationsComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-custom-subtitle',
  standalone: true,
  imports: [CommonModule, CometChatConversationsComponent],
  template: `
    <cometchat-conversations [subtitleView]="customSubtitle">
      <ng-template #customSubtitle let-conversation>
        <span>{{ describe(conversation) }}</span>
      </ng-template>
    </cometchat-conversations>
  `,
})
export class CustomSubtitleComponent {
  describe(conversation: CometChat.Conversation): string {
    const with_ = conversation.getConversationWith();

    if (conversation.getConversationType() === 'user') {
      const user = with_ as CometChat.User;
      return user.getStatus() === 'online' ? '🟢 Online' : '⚫ Offline';
    }

    const group = with_ as CometChat.Group;
    return `${group.getMembersCount()} members`;
  }
}
```

<Tip>
  To change a single element — just the avatar, or just the timestamp — use the `slots` input instead of replacing the whole subtitle section.
</Tip>

***

### **Custom Send Button**

Replace the default send button with your brand's icon.

**Component**: [Message Composer](/docs/ui-kit/angular/components/cometchat-message-composer) → `sendButtonView`

```typescript theme={null}
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatMessageComposerComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-custom-send',
  standalone: true,
  imports: [CommonModule, CometChatMessageComposerComponent],
  template: `
    <cometchat-message-composer
      [user]="chatUser"
      [sendButtonView]="customSendButton"
    >
      <ng-template #customSendButton>
        <button class="custom-send-btn" aria-label="Send message">
          <span class="send-icon">➤</span>
        </button>
      </ng-template>
    </cometchat-message-composer>
  `,
  styles: [`
    .custom-send-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: var(--cometchat-primary-color);
      color: var(--cometchat-static-white);
      border: none;
      border-radius: 50%;
      cursor: pointer;
    }
  `],
})
export class CustomSendComponent {
  @Input() chatUser?: CometChat.User;
}
```

<Tip>
  Use the UI Kit's CSS variables (`--cometchat-primary-color` and friends) in your own styles rather than hard-coded hex values. Your Builder brand color then flows through automatically, and it keeps working when the theme switches between light and dark.
</Tip>

***

## **Styling with CSS Variables**

The quickest way to restyle without touching components is to override the UI Kit's CSS variables. Your Builder theme already writes these — you can narrow or extend them.

```css theme={null}
/* Applies everywhere the chat renders */
cometchat-app {
  --cometchat-primary-color: #6852d6;
  --cometchat-text-color-primary: #141414;
  --cometchat-text-color-secondary: #727272;
}

/* Or scope to one component */
cometchat-app .cometchat-message-composer {
  --cometchat-background-color-02: #f5f5f5;
}
```

<Note>
  The export applies your Builder colors as inline variables on the document element. Overrides scoped to `cometchat-app` or a component class will win over those for the elements they cover.
</Note>

See [Theming](/docs/ui-kit/angular/customization/theming) for the full variable reference, and [Message Bubble Styling](/docs/ui-kit/angular/message-bubble-styling) for bubble-specific options.

***

## **Next Steps**

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

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

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

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


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