Component variables

CSS variables are the easiest way to customize the theme. They’re organized into two layers:

• Global
• Component

Global variables affect the whole chat UI, while component variables change individual components (for example, the message component).

Component variables are further grouped into:

• Theme variables for changing text and background colors, borders and shadows
• Layout variables defined for some components (but not all) to change the size of a specific part of a component

Best Practices

• Use component variables when you need localized visual changes without global ripple effects.
• Start with theme variables before layout variables to preserve component spacing.
• Track overrides per component to avoid duplicated or conflicting tokens.
• Prefer variables over raw CSS overrides for forward compatibility.
• Re-test complex components (Message, MessageComposer, ChannelList) after variable changes.

You can find the list of components below: