# 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, MessageInput, ChannelList) after variable changes. You can find the list of components below: | Component name | Variables | | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `AttachmentList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/AttachmentList/AttachmentList-layout.scss) | | `AttachmentPreviewList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-layout.scss) | | `AudioRecorder` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/AudioRecorder/AudioRecorder-layout.scss) | | `Autocomplete` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/Autocomplete/Autocomplete-theme.scss) | | `Avatar` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/Avatar/Avatar-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/Avatar/Avatar-layout.scss) | | `Channel` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/Channel/Channel-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/Channel/Channel-layout.scss) | | `ChannelHeader` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss) | | `ChannelList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/ChannelList/ChannelList-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/ChannelList/ChannelList-layout.scss) | | `ChannelPreview` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/ChannelPreview/ChannelPreview-layout.scss) | | `ChannelSearch` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss) | | `ChatView` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/ChatView/ChatView-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/ChatView/ChatView-layout.scss) | | `CircleFAButton` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss) | | `CTAButton` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/CTAButton/CTAButton-theme.scss) | | `Dialog` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/Dialog/Dialog-theme.scss) | | `DragAndDropContainer` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/DragAndDropContainer/DragAndDropContainer-theme.scss) | | `EditMessageForm` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss) | | `Icon` (Angular SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/Icon/Icon-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/Icon/Icon-layout.scss) | | `ImageCarousel` (Angular SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/ImageCarousel/ImageCarousel-layout.scss) | | `LoadingIndicator` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/LoadingIndicator/LoadingIndicator-layout.scss) | | `Message` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/Message/Message-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/Message/Message-layout.scss) | | `MessageActionsBox` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss) | | `MessageBouncePrompt` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss) | | `MessageInput` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/MessageInput/MessageInput-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/MessageInput/MessageInput-layout.scss) | | `MessageList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/MessageList/MessageList-theme.scss) | | `MessageNotification` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/MessageNotification/MessageNotification-theme.scss) | | `MessageReactions` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/MessageReactions/MessageReactions-layout.scss) | | `MessageReactionsSelector` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) | | `Modal` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/Modal/Modal-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/Modal/Modal-layout.scss) | | `Notification` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/Notification/Notification-theme.scss) | | `NotificationList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/NotificationList/NotificationList-theme.scss) | | `Poll` | [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/Poll/Poll-layout.scss) | | `Thread` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/Thread/Thread-theme.scss) | | `ThreadList` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/ThreadList/ThreadList-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/ThreadList/ThreadList-layout.scss) | | `Tooltip` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/Tooltip/Tooltip-theme.scss) | | `TypingIndicator` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) | | `UnreadCountBadge` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/UnreadCountBadge/UnreadCountBadge-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/UnreadCountBadge/UnreadCountBadge-layout.scss) | | `VirtualizedMessageList` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.2.0/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss) | --- This page was last updated at 2026-04-21T07:55:46.956Z. For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v13/theming/component-variables/](https://getstream.io/chat/docs/sdk/react/v13/theming/component-variables/).