Skip to main content
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.
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

​
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.
<TYPE><TYPE> is one of text, image, video, audio, file
Link Preview BubblesIt reuse the text-message type selector since link previews are rendered inside text messages.

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

​
Bubble Structure

Each message bubble has this DOM structure:

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

​
Styling

​
Outgoing Message Bubbles

Selectors:
Tokens used: The customized chat interface is displayed below.
Use the following code to achieve the customization shown above.
App.css
Expected result: All outgoing message bubbles change from purple to orange (#f76808) with a lighter orange shade (#fbaa75).

​
Incoming Message Bubbles

Selectors:
Tokens used: The customized chat interface is displayed below.
Use the following code to achieve the customization shown above.
App.css
Expected result: All incoming message bubbles change from white/light to orange (#f76808).

​
All Message Bubbles

Selectors:
Tokens used: The customized chat interface is displayed below.
Use the following code to achieve the customization shown above.
App.css
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:
Step 2: Ensure App.tsx imports the CSS:
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:
Tokens used: Shown below is the default chat interface.
The customized chat interface is displayed below.
Complete CSS:
Expected result: Outgoing text bubbles change to orange (#f76808); incoming text bubbles change to light peach (#feede1).

​
Image Message Bubble

Image messages render with the Image Bubble (.cometchat-images-bubble, with --incoming / --outgoing / --single modifiers) — the batch-aware component that lays out one or more images in a grid. The bubble background (visible behind the grid, in the gaps and the “+N” overflow tile) is set through the __image-message body selector below; target .cometchat-images-bubble for the media content itself. Selectors:
Tokens used: Shown below is the default chat interface.
The customized chat interface is displayed below.
Complete CSS:
Expected result: Outgoing image bubbles change to orange (#f76808); incoming image bubbles change to light peach (#feede1).

​
Video Message Bubble

Video messages render with the Video Bubble (.cometchat-videos-bubble, with --incoming / --outgoing / --single modifiers) — the batch-aware component that lays out one or more video thumbnails in a grid. The bubble background is set through the __video-message body selector below; target .cometchat-videos-bubble for the media content itself. Selectors:
Tokens used: Shown below is the default chat interface.
The customized chat interface is displayed below.
Complete CSS:
Expected result: Outgoing video bubbles change to orange (#f76808); incoming video bubbles change to light peach (#feede1).

​
Audio Message Bubble

Attached audio files render with the Audio Bubble (.cometchat-audios-bubble) — stacked playback cards. A single audio card is transparent and shows the bubble background; when a message carries multiple audio files, each card gets its own background. The bubble background is set through the __audio-message body selector below.
Attached audio and voice notes share the same __audio-message body type class, so an __audio-message selector styles both. To target only attached audio, use .cometchat-audios-bubble; to target only voice notes, use .cometchat-audio-bubble (see Voice Note Message Bubble).
Selectors:
Tokens used: Shown below is the default chat interface.
The customized chat interface is displayed below.
Complete CSS:
Expected result: Outgoing audio bubbles change to orange (#f76808) with lighter-orange stacked cards (#fbaa75); incoming audio bubbles change to light peach (#feede1) with orange playback controls and peach stacked cards (#fbd9c0).

​
File Message Bubble

File attachments render with the File Bubble (.cometchat-files-bubble) — stacked file cards with type icons. A single file card is transparent and shows the bubble background; when a message carries multiple files, each card gets its own background. The bubble background is set through the __file-message body selector below; target .cometchat-files-bubble for the card content. Selectors:
Tokens used: Shown below is the default chat interface.
The customized chat interface is displayed below.
Complete CSS:
Expected result: Outgoing file bubbles change to orange (#f76808) with lighter-orange stacked cards (#fbaa75); incoming file bubbles change to light peach (#feede1) with peach stacked cards (#fbd9c0) and an orange download-icon accent.

​
Voice Note Message Bubble

Voice notes — audio messages recorded in the composer (tagged audioType: "voice_note") — render with the Voice Note Bubble (.cometchat-audio-bubble), a standalone waveform player. Its direction modifiers are --sender (outgoing) and --receiver (incoming).
Voice notes share the __audio-message body type class with attached audio, so an __audio-message selector styles both. To target only voice notes, use .cometchat-audio-bubble; for only attached audio files, use .cometchat-audios-bubble.
Selectors:
Tokens used: Complete CSS:
Expected result: Outgoing voice notes use an orange bubble (#f76808) with a white waveform and controls; incoming voice notes use a light-peach bubble (#feede1) with orange waveform progress and controls.

​
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: Shown below is the default chat interface.
The customized chat interface is displayed below.
Complete CSS:
Expected result: Action message banners change to light peach background (#feede1) with orange text, icons, and borders (#f76808).

​
Extensions

​
Collaborative Whiteboard Bubble

Selectors:
Collaborative whiteboard messages use the text-message type class internally.
Tokens used: Shown below is the default chat interface.
The customized chat interface is displayed below.
Complete CSS:
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:
Collaborative document messages use the text-message type class internally.
Tokens used: Shown below is the default chat interface.
The customized chat interface is displayed below.
Complete CSS:
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:
Poll messages use the text-message type class internally.
Tokens used: Shown below is the default chat interface.
The customized chat interface is displayed below.
Complete CSS:
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:
Sticker messages use the image-message type class internally.
Tokens used: Shown below is the default chat interface.
The customized chat interface is displayed below.
Complete CSS:
Expected result: Outgoing sticker bubbles change to orange (#f76808); incoming sticker bubbles change to light peach (#feede1).
Link previews render inside text message bubbles, so they use the text-message type selector. Selectors:
Tokens used:
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.
Shown below is the default chat interface.
The customized chat interface is displayed below.
Complete CSS:
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:
All class names follow BEM conventions and are stable across builds. You can target them with standard .class-name selectors in your CSS.