--- id: component-variables sidebar_position: 3 title: Component variables keywords: [v2, theme-v2, theming-v2, theming, component variables] --- CSS variables are the easiest way to customize the theme. The variables are organized into two layers: - Global - Component Global variables change the layout/look-and-feel of the whole chat UI, meanwhile component variables change only a part of it (for example message component). Component variables can be further grouped in the following ways: - **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 You can find the list of components below: | Component name | Variables | | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `AttachmentList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/AttachmentList/AttachmentList-layout.scss) | | `AttachmentPreviewList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-layout.scss) | | `AudioRecorder` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/AudioRecorder/AudioRecorder-layout.scss) | | `Autocomplete` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss) | | `Avatar` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/Avatar/Avatar-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/Avatar/Avatar-layout.scss) | | `Channel` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/Channel/Channel-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/Channel/Channel-layout.scss) | | `ChannelHeader` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss) | | `ChannelList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/ChannelList/ChannelList-layout.scss) | | `ChannelPreview` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/ChannelPreview/ChannelPreview-layout.scss) | | `ChannelSearch` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss) | | `ChatView` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/ChatView/ChatView-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/ChatView/ChatView-layout.scss) | | `CircleFAButton` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss) | | `CTAButton` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss) | | `Dialog` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/Dialog/Dialog-theme.scss) | | `DragAndDropContainer` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/DragAndDropContainer/DragAndDropContainer-theme.scss) | | `DropzoneContainer` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/DropzoneContainer/DropzoneContainer-theme.scss) | | `EditMessageForm` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss) | | `Icon` (Angular SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/Icon/Icon-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/Icon/Icon-layout.scss) | | `ImageCarousel` (Angular SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/ImageCarousel/ImageCarousel-layout.scss) | | `LinkPreview` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss) | | `LoadingIndicator` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/LoadingIndicator/LoadingIndicator-layout.scss) | | `Message` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/Message/Message-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/Message/Message-layout.scss) | | `MessageActionsBox` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss) | | `MessageBouncePrompt` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss) | | `MessageInput` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/MessageInput/MessageInput-layout.scss) | | `MessageList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/MessageList/MessageList-theme.scss) | | `MessageNotification` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss) | | `MessageReactions` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/MessageReactions/MessageReactions-layout.scss) | | `MessageReactionsSelector` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss) | | `Modal` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/Modal/Modal-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/Modal/Modal-layout.scss) | | `Notification` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/Notification/Notification-theme.scss) | | `NotificationList` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/NotificationList/NotificationList-theme.scss) | | `Poll` | [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/Poll/Poll-layout.scss) | | `Search` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/Search/Search-theme.scss) | | `Thread` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/Thread/Thread-theme.scss) | | `ThreadList` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/ThreadList/ThreadList-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/ThreadList/ThreadList-layout.scss) | | `Tooltip` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/Tooltip/Tooltip-theme.scss) | | `TypingIndicator` | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) | | `UnreadCountBadge` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/UnreadCountBadge/UnreadCountBadge-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/UnreadCountBadge/UnreadCountBadge-layout.scss) | | `VirtualizedMessageList` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v5.16.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss) |