> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Bubble Styling

> Customize incoming and outgoing message bubble colors, backgrounds, and styles using CSS variables and class selectors in the CometChat React UI Kit.

<Accordion title="AI Integration Quick Reference">
  | Field         | Value                                                                                                                   |
  | ------------- | ----------------------------------------------------------------------------------------------------------------------- |
  | Goal          | Customize message bubble appearance (colors, backgrounds) per direction and message type                                |
  | Where         | `App.css` (global) — imported in app entry via `import "./App.css";`                                                    |
  | Base selector | `.cometchat .cometchat-message-bubble-(incoming\|outgoing) .cometchat-message-bubble__body`                             |
  | Type modifier | Append `.cometchat-message-bubble__<TYPE>-message` to target specific types (`text`, `image`, `video`, `audio`, `file`) |
  | Key tokens    | `--cometchat-primary-color` (outgoing bg), `--cometchat-neutral-color-300` (incoming bg)                                |
  | Constraints   | Global CSS only (no CSS Modules), no `!important`, type selectors override generic bubble selectors                     |
</Accordion>

Message bubble styling uses distinct CSS classes for incoming and outgoing messages. Each message type (text, image, video, audio, file, etc.) has predefined classes for default styling, customizable via CSS variable overrides.

<Warning>
  **Prerequisites before applying any CSS customization:**

  1. All selectors assume the UI Kit renders under a `.cometchat` root wrapper
  2. Import your CSS file at the app entry: `import "./App.css";` in `App.tsx`
  3. Use **global CSS** (not CSS Modules with hashed class names) — hashed selectors won't match
</Warning>

***

## Selector Pattern

Use this table to construct the correct CSS selector for any message bubble target. AI agents should use this pattern to generalize — do not guess selectors.

| Target                        | Selector Pattern                                                                                                         |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| All bubbles                   | `.cometchat .cometchat-message-bubble .cometchat-message-bubble__body`                                                   |
| Outgoing bubbles (all types)  | `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body`                                          |
| Incoming bubbles (all types)  | `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body`                                          |
| Specific type (outgoing)      | `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__<TYPE>-message` |
| Specific type (incoming)      | `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__<TYPE>-message` |
| Action bubbles (no direction) | `.cometchat .cometchat-message-bubble__body .cometchat-action-bubble`                                                    |

<Note>
  `<TYPE>`

  `<TYPE>` is one of `text`, `image`, `video`, `audio`, `file`
</Note>

<Note>
  Link Preview Bubbles

  It reuse the `text-message` type selector since link previews are rendered inside text messages.
</Note>

***

## CSS Variable Reference

These are the CSS variables (tokens) used across message bubble styling. This table tells you exactly what each token controls — do not assume a token affects something not listed here.

| Variable                                 | What It Controls                           | Default (Light) | Commonly Used On                                   |
| ---------------------------------------- | ------------------------------------------ | --------------- | -------------------------------------------------- |
| `--cometchat-primary-color`              | Outgoing bubble background, primary accent | `#6852d6`       | Outgoing bubbles (all types), action bubble accent |
| `--cometchat-neutral-color-300`          | Incoming bubble background                 | `#E8E8E8`       | Incoming bubbles (all types)                       |
| `--cometchat-extended-primary-color-900` | Outgoing bubble shade/gradient variant     | `#5d49be`       | Outgoing text bubble, link preview                 |
| `--cometchat-extended-primary-color-800` | Outgoing bubble secondary shade            | `#5745b4`       | Direct call outgoing bubble                        |
| `--cometchat-extended-primary-color-700` | Outgoing bubble tertiary shade             | `#4f3ea3`       | Poll outgoing bubble                               |
| `--cometchat-neutral-color-400`          | Incoming bubble secondary shade            | varies          | Link preview incoming                              |
| `--cometchat-primary-button-background`  | Primary button fill inside bubbles         | matches primary | Whiteboard/document incoming buttons               |
| `--cometchat-text-color-secondary`       | Secondary/caption text color               | varies          | Action bubble text                                 |
| `--cometchat-icon-color-secondary`       | Secondary icon color                       | varies          | Action bubble icons                                |
| `--cometchat-border-color-default`       | Default border color                       | varies          | Action bubble borders                              |

***

<Note>
  **CSS Specificity & Precedence Rules:**

  1. Message-type selectors (e.g., `__text-message`) override "All Message Bubbles" selectors
  2. Always keep the `.cometchat` prefix to avoid leaking styles into the host app
  3. Component-level variable overrides (`.cometchat-message-list { --var: val }`) override global overrides (`.cometchat { --var: val }`)
  4. CSS variable overrides only affect properties the UI Kit theme binds to that variable — they do NOT change layout or spacing
  5. `!important` should never be needed — if it is, your selector specificity is wrong
</Note>

***

## Bubble Structure

Each message bubble has this DOM structure:

```
.cometchat-message-bubble
  ├── .cometchat-message-bubble__leading-view (avatar)
  ├── .cometchat-message-bubble__header-view (sender name)
  ├── .cometchat-message-bubble__body-container
  │   ├── .cometchat-message-bubble__body-wrapper
  │   │   ├── .cometchat-message-bubble__body
  │   │   │   ├── .cometchat-message-bubble__body-reply-view (quoted message)
  │   │   │   ├── .cometchat-message-bubble__body-content-view (plugin bubble content)
  │   │   │   └── .cometchat-message-bubble__body-status-info-view (timestamp + receipts)
  │   │   ├── .cometchat-message-bubble__body-footer-view (reactions)
  │   │   ├── .cometchat-message-bubble__body-thread-view (reply count)
  │   │   └── .cometchat-message-bubble__body-bottom-view (moderation)
  │   └── .cometchat-message-bubble__options (context menu)
```

***

## Incoming & Outgoing Messages

Incoming and outgoing messages have different styling by default, allowing users to visually separate their own messages from others'. Here, we show both the default view and examples of customizations for these message bubbles.

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Gp90C5sdVtuRR4t7/images/82088b57-message_bubble_styling_default-b1a15eb68fcf1e9a68296ccdd1aa8488.png?fit=max&auto=format&n=Gp90C5sdVtuRR4t7&q=85&s=cc2b91d5c105b748d6704cd7e45fe313" width="1280" height="1006" data-path="images/82088b57-message_bubble_styling_default-b1a15eb68fcf1e9a68296ccdd1aa8488.png" />
</Frame>

***

### Styling

#### Outgoing Message Bubbles

**Selectors:**

```css theme={null}
.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body
```

**Tokens used:**

| Token                                    | Controls                   |
| ---------------------------------------- | -------------------------- |
| `--cometchat-primary-color`              | Outgoing bubble background |
| `--cometchat-extended-primary-color-900` | Outgoing bubble shade      |

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2SVOPiSpm0QEqRoz/images/eb47fdb7-message_bubble_styling_custom_outgoing_bubbles-a58b5baf50e3f6784c1dd4443ade5419.png?fit=max&auto=format&n=2SVOPiSpm0QEqRoz&q=85&s=36109587c35932c6e4176c9fa8d5543a" width="1021" height="661" data-path="images/eb47fdb7-message_bubble_styling_custom_outgoing_bubbles-a58b5baf50e3f6784c1dd4443ade5419.png" />
</Frame>

Use the following code to achieve the customization shown above.

```css title="App.css" theme={null}
.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body {
  --cometchat-primary-color: #f76808;
  --cometchat-extended-primary-color-900: #fbaa75;
}
```

**Expected result:** All outgoing message bubbles change from purple to orange (#f76808) with a lighter orange shade (#fbaa75).

***

#### Incoming Message Bubbles

**Selectors:**

```css theme={null}
.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body
```

**Tokens used:**

| Token                           | Controls                   |
| ------------------------------- | -------------------------- |
| `--cometchat-neutral-color-300` | Incoming bubble background |

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mNTojjz_O28of40c/images/f80a1ad4-message_bubble_styling_custom_incoming_bubbles-7b0644cba17d6148e15d7ab70124901c.png?fit=max&auto=format&n=mNTojjz_O28of40c&q=85&s=de06415cc6a2cfc134a792e5d69dd423" width="1021" height="661" data-path="images/f80a1ad4-message_bubble_styling_custom_incoming_bubbles-7b0644cba17d6148e15d7ab70124901c.png" />
</Frame>

Use the following code to achieve the customization shown above.

```css title="App.css" theme={null}
.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body {
  --cometchat-neutral-color-300: #f76808;
}
```

**Expected result:** All incoming message bubbles change from white/light to orange (#f76808).

***

#### All Message Bubbles

**Selectors:**

```css theme={null}
.cometchat .cometchat-message-bubble .cometchat-message-bubble__body
```

**Tokens used:**

| Token                                    | Controls                   |
| ---------------------------------------- | -------------------------- |
| `--cometchat-neutral-color-300`          | Incoming bubble background |
| `--cometchat-primary-color`              | Outgoing bubble background |
| `--cometchat-extended-primary-color-900` | Outgoing bubble shade      |

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/ugckbRl5Q-H7t8X2/images/e5b849ed-message_bubble_styling_custom_all_bubbles-525099af213cddef662fb77ac0398710.png?fit=max&auto=format&n=ugckbRl5Q-H7t8X2&q=85&s=8238ba5517f576ff3d725fd58f7383a5" width="1021" height="661" data-path="images/e5b849ed-message_bubble_styling_custom_all_bubbles-525099af213cddef662fb77ac0398710.png" />
</Frame>

Use the following code to achieve the customization shown above.

```css title="App.css" theme={null}
.cometchat .cometchat-message-bubble .cometchat-message-bubble__body {
  --cometchat-neutral-color-300: #f76808;
  --cometchat-primary-color: #f76808;
  --cometchat-extended-primary-color-900: #fbaa75;
}
```

**Expected result:** Both incoming and outgoing bubbles use orange (#f76808), with outgoing shade set to lighter orange (#fbaa75).

***

### Complete End-to-End Example

To apply custom bubble colors in your app:

**Step 1:** Add to `App.css`:

```css theme={null}
/* Custom outgoing bubbles */
.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body {
  --cometchat-primary-color: #f76808;
  --cometchat-extended-primary-color-900: #fbaa75;
}

/* Custom incoming bubbles */
.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body {
  --cometchat-neutral-color-300: #feede1;
}
```

**Step 2:** Ensure `App.tsx` imports the CSS:

```tsx theme={null}
import "./App.css";
// ... render CometChat UI Kit components
```

**Expected result:** Outgoing bubbles use orange (#f76808) with lighter shade (#fbaa75); incoming bubbles use light peach (#feede1).

***

## Message Types

CometChat UI Kit includes classes for various message types. Below are examples of default & customised views for each message type, along with the relevant CSS code snippets so that you can quickly get up to speed with CSS customization.

***

### Text Message Bubble

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__text-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__text-message
    ```
  </Tab>
</Tabs>

**Tokens used:**

| Token                           | Controls                        |
| ------------------------------- | ------------------------------- |
| `--cometchat-primary-color`     | Outgoing text bubble background |
| `--cometchat-neutral-color-300` | Incoming text bubble background |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mNTojjz_O28of40c/images/fa4eb398-text_message_bubble_default-e20a1cae931c771c1cc0db796dbd292d.png?fit=max&auto=format&n=mNTojjz_O28of40c&q=85&s=55484f5316437ebf1247aeefff0f1afc" width="1280" height="198" data-path="images/fa4eb398-text_message_bubble_default-e20a1cae931c771c1cc0db796dbd292d.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Xgdtn9VZPDi47bm-/images/23809d0d-text_message_bubble_custom-6658691cdd69e6eba64a73041b4de005.png?fit=max&auto=format&n=Xgdtn9VZPDi47bm-&q=85&s=1c07f89a6836523820605b4da8a14335" width="1280" height="198" data-path="images/23809d0d-text_message_bubble_custom-6658691cdd69e6eba64a73041b4de005.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css theme={null}
    /* Outgoing Text Message Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__text-message {
      --cometchat-primary-color: #f76808;
    }

    /* Incoming Text Message Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__text-message {
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing text bubbles change to orange (#f76808); incoming text bubbles change to light peach (#feede1).

***

### Image Message Bubble

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__image-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__image-message
    ```
  </Tab>
</Tabs>

**Tokens used:**

| Token                           | Controls                         |
| ------------------------------- | -------------------------------- |
| `--cometchat-primary-color`     | Outgoing image bubble background |
| `--cometchat-neutral-color-300` | Incoming image bubble background |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/G6Puyz_3Zlaowa9R/images/cd898026-image_message_bubble_default-7918ea21eae55cd008eff6a567fec19a.png?fit=max&auto=format&n=G6Puyz_3Zlaowa9R&q=85&s=617bbc7e714289048f611f0dc3c7773f" width="1280" height="696" data-path="images/cd898026-image_message_bubble_default-7918ea21eae55cd008eff6a567fec19a.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mkn0UqPQ5BXljCV1/images/90eaeef4-image_message_bubble_custom-864b9cc63443a30a4830d84b96d9da1e.png?fit=max&auto=format&n=mkn0UqPQ5BXljCV1&q=85&s=6e5975c96f5c9a87915ba092cc5c81f9" width="1280" height="696" data-path="images/90eaeef4-image_message_bubble_custom-864b9cc63443a30a4830d84b96d9da1e.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css theme={null}
    /* Outgoing Image Message Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__image-message {
      --cometchat-primary-color: #f76808;
    }

    /* Incoming Image Message Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__image-message {
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing image bubbles change to orange (#f76808); incoming image bubbles change to light peach (#feede1).

***

### Video Message Bubble

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__video-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__video-message
    ```
  </Tab>
</Tabs>

**Tokens used:**

| Token                           | Controls                         |
| ------------------------------- | -------------------------------- |
| `--cometchat-primary-color`     | Outgoing video bubble background |
| `--cometchat-neutral-color-300` | Incoming video bubble background |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/fxK75AS6FzDL1Oqo/images/bc8adc5d-video_message_bubble_default-b159e925e6598e5b01e4d9a2490e0d4c.png?fit=max&auto=format&n=fxK75AS6FzDL1Oqo&q=85&s=21521c818e713605aca6699b9558330b" width="1280" height="508" data-path="images/bc8adc5d-video_message_bubble_default-b159e925e6598e5b01e4d9a2490e0d4c.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/JSRiWiPGBHsJZFCg/images/9cc7c4d6-video_message_bubble_custom-2c1fcd569de35d4ad7b83641bd68b9e0.png?fit=max&auto=format&n=JSRiWiPGBHsJZFCg&q=85&s=24a75497c9ded815b6d8be597641576f" width="1280" height="508" data-path="images/9cc7c4d6-video_message_bubble_custom-2c1fcd569de35d4ad7b83641bd68b9e0.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css theme={null}
    /* Outgoing Video Message Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__video-message {
      --cometchat-primary-color: #f76808;
    }

    /* Incoming Video Message Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__video-message {
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing video bubbles change to orange (#f76808); incoming video bubbles change to light peach (#feede1).

***

### Audio Message Bubble

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__audio-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__audio-message
    ```
  </Tab>
</Tabs>

**Tokens used:**

| Token                           | Controls                                                |
| ------------------------------- | ------------------------------------------------------- |
| `--cometchat-primary-color`     | Outgoing audio bubble background, incoming audio accent |
| `--cometchat-neutral-color-300` | Incoming audio bubble background                        |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/jpEUuHUk-hvu4tQT/images/a4a1b992-audio_message_bubble_default-970bc6bcea3c589a44f649c47b9c04a4.png?fit=max&auto=format&n=jpEUuHUk-hvu4tQT&q=85&s=541cce87e81937d1c182e72620149a50" width="1280" height="320" data-path="images/a4a1b992-audio_message_bubble_default-970bc6bcea3c589a44f649c47b9c04a4.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/7emVxEQ5MCxvzC60/images/21bb54b1-audio_message_bubble_custom-68c7ca1b576d7aed709d1e3ef80e371a.png?fit=max&auto=format&n=7emVxEQ5MCxvzC60&q=85&s=440b6da511d43b1b65fa9f4a3ffc39dd" width="1280" height="320" data-path="images/21bb54b1-audio_message_bubble_custom-68c7ca1b576d7aed709d1e3ef80e371a.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css theme={null}
    /* Outgoing Audio Message Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__audio-message {
      --cometchat-primary-color: #f76808;
    }

    /* Incoming Audio Message Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__audio-message {
      --cometchat-primary-color: #f76808;
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing audio bubbles change to orange (#f76808); incoming audio bubbles change to light peach (#feede1) with orange accent for playback controls.

***

### File Message Bubble

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__file-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__file-message
    ```
  </Tab>
</Tabs>

**Tokens used:**

| Token                           | Controls                                              |
| ------------------------------- | ----------------------------------------------------- |
| `--cometchat-primary-color`     | Outgoing file bubble background, incoming file accent |
| `--cometchat-neutral-color-300` | Incoming file bubble background                       |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Xgdtn9VZPDi47bm-/images/2743e926-file_message_bubble_default-032205256a207879384943fc87367b03.png?fit=max&auto=format&n=Xgdtn9VZPDi47bm-&q=85&s=55d178887bded5aee66be5b8eeafcc4c" width="1280" height="316" data-path="images/2743e926-file_message_bubble_default-032205256a207879384943fc87367b03.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/PaxBG9I1yMoeQmt2/images/35dad07f-file_message_bubble_custom-e4661d6df1324ab28b8b2de991477f12.png?fit=max&auto=format&n=PaxBG9I1yMoeQmt2&q=85&s=a6c9dc7eeda60eb49ebc189bc2f64573" width="1280" height="316" data-path="images/35dad07f-file_message_bubble_custom-e4661d6df1324ab28b8b2de991477f12.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css theme={null}
    /* Outgoing File Message Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__file-message {
      --cometchat-primary-color: #f76808;
    }

    /* Incoming File Message Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__file-message {
      --cometchat-primary-color: #f76808;
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing file bubbles change to orange (#f76808); incoming file bubbles change to light peach (#feede1) with orange file icon accent.

***

### Action Message Bubble

Action messages (e.g., "User joined the group") use a different selector pattern — they are not directional (no incoming/outgoing).

**Selector:**

* `.cometchat .cometchat-message-bubble__body .cometchat-action-bubble`

**Tokens used:**

| Token                              | Controls                                                       |
| ---------------------------------- | -------------------------------------------------------------- |
| `--cometchat-primary-color`        | Action bubble accent color                                     |
| `background-color`                 | Action bubble background (direct CSS property, not a variable) |
| `--cometchat-text-color-secondary` | Action bubble text color                                       |
| `--cometchat-icon-color-secondary` | Action bubble icon color                                       |
| `--cometchat-border-color-default` | Action bubble border color                                     |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/jpEUuHUk-hvu4tQT/images/a2c4c9a6-wcXOfMpnNl0mgAAAABJRU5ErkJggg.png?fit=max&auto=format&n=jpEUuHUk-hvu4tQT&q=85&s=6d28a966ac2807697092585a14106b35" width="1280" height="238" data-path="images/a2c4c9a6-wcXOfMpnNl0mgAAAABJRU5ErkJggg.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/TO10Bmu50bb5qPTI/images/2d6c38a0-action_message_bubble_custom-160bec68a93f3aca25e473bb60886649.png?fit=max&auto=format&n=TO10Bmu50bb5qPTI&q=85&s=dbea385c90acaab2250380a4bdf43b3e" width="1280" height="238" data-path="images/2d6c38a0-action_message_bubble_custom-160bec68a93f3aca25e473bb60886649.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css theme={null}
    .cometchat .cometchat-message-bubble__body .cometchat-action-bubble {
      --cometchat-primary-color: #f76808;
      background-color: #feede1;
      --cometchat-text-color-secondary: #f76808;
      --cometchat-icon-color-secondary: #f76808;
      --cometchat-border-color-default: #f76808;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Action message banners change to light peach background (#feede1) with orange text, icons, and borders (#f76808).

***

### Extensions

#### Collaborative Whiteboard Bubble

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__text-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__text-message
    ```
  </Tab>
</Tabs>

<Note>
  In v7, collaborative whiteboard messages use the `text-message` type class internally.
</Note>

**Tokens used:**

| Token                                   | Controls                               |
| --------------------------------------- | -------------------------------------- |
| `--cometchat-primary-color`             | Bubble accent and background           |
| `--cometchat-primary-button-background` | Incoming whiteboard "Open" button fill |
| `--cometchat-neutral-color-300`         | Incoming bubble background             |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/G6Puyz_3Zlaowa9R/images/cbb18dd6-extensions_whiteboard_message_bubble_default-51119b88b5b6bc11b4628d2d03b6c0a4.png?fit=max&auto=format&n=G6Puyz_3Zlaowa9R&q=85&s=de09d6bb66c200593d596763050760fe" width="1280" height="668" data-path="images/cbb18dd6-extensions_whiteboard_message_bubble_default-51119b88b5b6bc11b4628d2d03b6c0a4.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/PaxBG9I1yMoeQmt2/images/3470b5c8-extensions_whiteboard_message_bubble_custom-005a48db24137a2870f4933afa07835d.png?fit=max&auto=format&n=PaxBG9I1yMoeQmt2&q=85&s=f323849631154b48587d13467a05fa49" width="1280" height="668" data-path="images/3470b5c8-extensions_whiteboard_message_bubble_custom-005a48db24137a2870f4933afa07835d.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css theme={null}
    /* Outgoing Collaborative Whiteboard Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__text-message {
      --cometchat-primary-color: #f76808;
    }

    /* Incoming Collaborative Whiteboard Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__text-message {
      --cometchat-primary-color: #f76808;
      --cometchat-primary-button-background: #f76808;
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing whiteboard bubbles change to orange (#f76808); incoming whiteboard bubbles change to light peach (#feede1) with orange button and accent.

***

#### Collaborative Document Bubble

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__text-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__text-message
    ```
  </Tab>
</Tabs>

<Note>
  In v7, collaborative document messages use the `text-message` type class internally.
</Note>

**Tokens used:**

| Token                                   | Controls                             |
| --------------------------------------- | ------------------------------------ |
| `--cometchat-primary-color`             | Bubble accent and background         |
| `--cometchat-primary-button-background` | Incoming document "Open" button fill |
| `--cometchat-neutral-color-300`         | Incoming bubble background           |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Gp90C5sdVtuRR4t7/images/83da2542-extensions_document_message_bubble_default-834f3b0a25f728f04167ab1fcbfff6a2.png?fit=max&auto=format&n=Gp90C5sdVtuRR4t7&q=85&s=d0ebad69770ceaaad90e058e64361e25" width="1280" height="668" data-path="images/83da2542-extensions_document_message_bubble_default-834f3b0a25f728f04167ab1fcbfff6a2.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/jpEUuHUk-hvu4tQT/images/a2d29f42-extensions_document_message_bubble_custom-9cffd5b18fd7d7e675552fd116c21b71.png?fit=max&auto=format&n=jpEUuHUk-hvu4tQT&q=85&s=2aa7b57d4c30a6a3d2df249d8600bbbb" width="1280" height="668" data-path="images/a2d29f42-extensions_document_message_bubble_custom-9cffd5b18fd7d7e675552fd116c21b71.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css theme={null}
    /* Outgoing Collaborative Document Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__text-message {
      --cometchat-primary-color: #f76808;
    }

    /* Incoming Collaborative Document Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__text-message {
      --cometchat-primary-color: #f76808;
      --cometchat-primary-button-background: #f76808;
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing document bubbles change to orange (#f76808); incoming document bubbles change to light peach (#feede1) with orange button and accent.

***

#### Polls Bubble

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__text-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__text-message
    ```
  </Tab>
</Tabs>

<Note>
  In v7, poll messages use the `text-message` type class internally.
</Note>

**Tokens used:**

| Token                                    | Controls                         |
| ---------------------------------------- | -------------------------------- |
| `--cometchat-primary-color`              | Bubble accent and background     |
| `--cometchat-extended-primary-color-700` | Outgoing poll progress bar shade |
| `--cometchat-neutral-color-300`          | Incoming bubble background       |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2SVOPiSpm0QEqRoz/images/f1c7a340-extensions_poll_message_bubble_default-9a10c3c038456c4e6c567b24892eff3f.png?fit=max&auto=format&n=2SVOPiSpm0QEqRoz&q=85&s=5c6aff847189cd78de59d6e7703644d4" width="1280" height="706" data-path="images/f1c7a340-extensions_poll_message_bubble_default-9a10c3c038456c4e6c567b24892eff3f.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/le8ibYc8lBJsShSE/images/58f52202-extensions_poll_message_bubble_custom-5deaab680a3ed80d5b1761099313ac26.png?fit=max&auto=format&n=le8ibYc8lBJsShSE&q=85&s=97a7d4b8b718d7da467aed89fb004656" width="1280" height="706" data-path="images/58f52202-extensions_poll_message_bubble_custom-5deaab680a3ed80d5b1761099313ac26.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css theme={null}
    /* Outgoing Poll Message Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__text-message {
      --cometchat-primary-color: #f76808;
      --cometchat-extended-primary-color-700: #fbaa75;
    }

    /* Incoming Poll Message Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__text-message {
      --cometchat-primary-color: #f76808;
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing poll bubbles change to orange (#f76808) with lighter progress bars (#fbaa75); incoming poll bubbles change to light peach (#feede1) with orange accent.

***

#### Stickers Bubble

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__image-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__image-message
    ```
  </Tab>
</Tabs>

<Note>
  In v7, sticker messages use the `image-message` type class internally.
</Note>

**Tokens used:**

| Token                           | Controls                           |
| ------------------------------- | ---------------------------------- |
| `--cometchat-primary-color`     | Outgoing sticker bubble background |
| `--cometchat-neutral-color-300` | Incoming sticker bubble background |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/G6Puyz_3Zlaowa9R/images/ca08378b-extensions_sticker_message_bubble_default-0f8dc6633998822ecd25199af799b2ad.png?fit=max&auto=format&n=G6Puyz_3Zlaowa9R&q=85&s=95e30dadea57faa681c7ba7f3312f7b0" width="1280" height="564" data-path="images/ca08378b-extensions_sticker_message_bubble_default-0f8dc6633998822ecd25199af799b2ad.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/ugckbRl5Q-H7t8X2/images/e64d8a88-extensions_sticker_message_bubble_custom-857ab9cc16e651b907e8f03293e403be.png?fit=max&auto=format&n=ugckbRl5Q-H7t8X2&q=85&s=8170c5c4d07588131c9c780789f924bd" width="1280" height="564" data-path="images/e64d8a88-extensions_sticker_message_bubble_custom-857ab9cc16e651b907e8f03293e403be.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css theme={null}
    /* Outgoing Sticker Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__image-message {
      --cometchat-primary-color: #f76808;
    }

    /* Incoming Sticker Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__image-message {
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing sticker bubbles change to orange (#f76808); incoming sticker bubbles change to light peach (#feede1).

***

#### Link Preview Bubble

Link previews render inside text message bubbles, so they use the `text-message` type selector.

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__text-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__text-message
    ```
  </Tab>
</Tabs>

**Tokens used:**

| Token                                    | Controls                                |
| ---------------------------------------- | --------------------------------------- |
| `--cometchat-primary-color`              | Outgoing link preview bubble background |
| `--cometchat-extended-primary-color-900` | Outgoing link preview shade             |
| `--cometchat-neutral-color-400`          | Incoming link preview secondary shade   |
| `--cometchat-neutral-color-300`          | Incoming link preview bubble background |

<Note>
  Styling link preview bubbles also affects regular text message bubbles since they share the same `__text-message` selector. This is by design — link previews are a sub-feature of text messages.
</Note>

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Xgdtn9VZPDi47bm-/images/28503268-extensions_link_preview_message_bubble_default-35dcf065866790a1e388c021a68188b0.png?fit=max&auto=format&n=Xgdtn9VZPDi47bm-&q=85&s=66a4dbc615c861b26132f4b75df6cc4a" width="1280" height="918" data-path="images/28503268-extensions_link_preview_message_bubble_default-35dcf065866790a1e388c021a68188b0.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/_MYSdWhXnUkTkjEH/images/4a2aa81e-extensions_link_preview_message_bubble_custom-a79d83c32cc6946d1c35c1803821fe3e.png?fit=max&auto=format&n=_MYSdWhXnUkTkjEH&q=85&s=d88bde2e5a42aedd694c11ea43fcdacc" width="1280" height="918" data-path="images/4a2aa81e-extensions_link_preview_message_bubble_custom-a79d83c32cc6946d1c35c1803821fe3e.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css theme={null}
    /* Outgoing Link Preview Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__text-message {
      --cometchat-primary-color: #f76808;
      --cometchat-extended-primary-color-900: #fbaa75;
    }

    /* Incoming Link Preview Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__text-message {
      --cometchat-neutral-color-400: #fbaa75;
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing link preview bubbles change to orange (#f76808) with lighter shade (#fbaa75); incoming link preview bubbles change to light peach (#feede1) with orange secondary shade (#fbaa75).

***

## CSS Selectors Reference

Class names are plain, stable BEM names that you can target directly:

| Target                        | Selector                                           |
| ----------------------------- | -------------------------------------------------- |
| Bubble wrapper                | `.cometchat-message-bubble`                        |
| Leading view (avatar)         | `.cometchat-message-bubble__leading-view`          |
| Header view (sender name)     | `.cometchat-message-bubble__header-view`           |
| Sender name                   | `.cometchat-message-bubble__sender-name`           |
| Body container                | `.cometchat-message-bubble__body-container`        |
| Body wrapper                  | `.cometchat-message-bubble__body-wrapper`          |
| Body                          | `.cometchat-message-bubble__body`                  |
| Reply view (quoted message)   | `.cometchat-message-bubble__body-reply-view`       |
| Content view                  | `.cometchat-message-bubble__body-content-view`     |
| Status info (time + receipts) | `.cometchat-message-bubble__body-status-info-view` |
| Footer (reactions)            | `.cometchat-message-bubble__body-footer-view`      |
| Thread indicator              | `.cometchat-message-bubble__body-thread-view`      |
| Bottom (moderation)           | `.cometchat-message-bubble__body-bottom-view`      |
| Options (context menu)        | `.cometchat-message-bubble__options`               |
| Incoming direction            | `.cometchat-message-bubble-incoming`               |
| Outgoing direction            | `.cometchat-message-bubble-outgoing`               |
| Action message                | `.cometchat-message-bubble-action`                 |

<Note>
  All class names follow BEM conventions and are stable across builds. You can target them with standard `.class-name` selectors in your CSS.
</Note>