# ComponentContext `ComponentContext` is provided by [`Channel`](/chat/docs/sdk/react/v13/components/core-components/channel/) and can be consumed by any `Channel` child. It contains UI component overrides for customization. To override UI under `Channel`, pass the overrides as `Channel` props so they’re injected into `ComponentContext`. Access it via `useComponentContext`. ## Best Practices - Prefer `WithComponents` to scope overrides instead of global component props. - Keep overrides small and composable to reduce future upgrade work. - Reuse default components when only styles or minor behavior changes are needed. - Avoid wrapping every subtree; scope overrides only where they differ. - Document custom overrides to keep UI behavior predictable across teams. ## Basic Usage Pull values from `ComponentContext` with our custom hook: ```tsx const { Attachment, Avatar, Message } = useComponentContext(); ``` ## WithComponents `WithComponents` is an override helper built on `ComponentContext`. It replaces prop-based overrides, which are being deprecated. ### Basic Usage of WithComponents In this example, the top-level [`MessageInput`](/chat/docs/sdk/react/v13/components/message-input-components/message_input/) uses the closest override (`CustomMessageInputUi1`). The [`Thread`](/chat/docs/sdk/react/v13/components/core-components/thread/) component uses its own `MessageInput`, and the closest override there is `CustomMessageInputUi2`. If you remove the `WithComponents` wrapper around `Thread`, its `MessageInput` falls back to `CustomMessageInputUi1`. With no `WithComponents` wrappers, defaults are used. ```tsx const CustomMessageInputUi1 = () => { /*...*/ }; const CustomMessageInputUi2 = () => { /*...*/ }; ; ``` You can also scope overrides like this: [`MessageInput`](/chat/docs/sdk/react/v13/components/message-input-components/message_input/) inside [`Window`](/chat/docs/sdk/react/v13/components/utility-components/window/) uses `CustomMessageInputUi2`, [`ThreadList`](/chat/docs/sdk/react/v13/components/core-components/thread-list/) inside [`ChatView.Threads`](/chat/docs/sdk/react/v13/components/utility-components/chat-view/) uses `CustomThreadListItem`, and both [`Thread`](/chat/docs/sdk/react/v13/components/core-components/thread/) components use `CustomMessageInputUi1` for their internal `MessageInput`. ```tsx const CustomThreadListItem = () => { /*...*/ }; {/*...*/} ; ``` ## Values ### Attachment Custom UI component to display attachment in an individual message. | Type | Default | | --------- | ----------------------------------------------------------------------------------------------------------------- | | component | [Attachment](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Attachment.tsx) | ### AttachmentPreviewList Custom UI component to display a attachment previews in `MessageInput`. | Type | Default | | --------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | component | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AttachmentPreviewList.tsx) | ### AttachmentSelector Custom UI component to control adding attachments to MessageInput, defaults to and accepts same props as: | Type | Default | | --------- | ----------------------------------------------------------------------------------------------------------------------------------- | | component | [AttachmentSelector](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AttachmentSelector.tsx) | ### AttachmentSelectorInitiationButtonContents Custom UI component for contents of attachment selector initiation button. | Type | | --------- | | component | ### AudioRecorder Custom UI component to display AudioRecorder in `MessageInput`. | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------------------- | | component | [AudioRecorder](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AudioRecorder.tsx) | ### AutocompleteSuggestionItem Custom UI component to override the default suggestion Item component. | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | component | [SuggestionListItem](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TextareaComposer/SuggestionList/SuggestionListItem.tsx) | ### AutocompleteSuggestionList Custom UI component to override the default List component that displays suggestions. | Type | Default | | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | component | [SuggestionList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TextareaComposer/SuggestionList/SuggestionList.tsx) | ### Avatar Custom UI component to display a user's avatar. | Type | Default | | --------- | ----------------------------------------------------------------------------------------------------- | | component | [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) | ### BaseImage Custom UI component to display image resp. a fallback in case of load error, in `` element. The default resp. custom (from `ComponentContext`) `BaseImage` component is rendered by: - [Image](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/Image.tsx) - single image attachment in message list - [Gallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/Gallery.tsx) - group of image attachments in message list - [AttachmentPreviewList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AttachmentPreviewList.tsx) - image uploads preview in message input (composer) The `BaseImage` component accepts the same props as `` element. The [default `BaseImage` component](/chat/docs/sdk/react/v13/components/utility-components/base-image/) tries to load and display an image and if the load fails, then an SVG image fallback is applied to the `` element as a CSS mask targeting attached `str-chat__base-image--load-failed` class. | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------ | | component | [BaseImage](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/BaseImage.tsx) | ### CooldownTimer Custom UI component to display the slow mode cooldown timer. | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------------------- | | component | [CooldownTimer](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/CooldownTimer.tsx) | ### CustomMessageActionsList Custom UI component to render set of buttons to be displayed in the [MessageActionsBox](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageActions/MessageActionsBox.tsx). | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | component | [CustomMessageActionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageActions/CustomMessageActionsList.tsx) | ### DateSeparator Custom UI component for date separators. | Type | Default | | --------- | -------------------------------------------------------------------------------------------------------------------------- | | component | [DateSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/DateSeparator/DateSeparator.tsx) | ### EditMessageInput Custom UI component to override default edit message input. | Type | Default | | --------- | ----------------------------------------------------------------------------------------------------------------------------- | | component | [EditMessageForm](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.tsx) | ### EditMessageModal Custom UI component to override default EditMessageModal component. It is useful when we want to override `additionalMessageInputProps`, e.g. number of rows in the textarea: ```tsx import { Channel, EditMessageModal, EditMessageModalProps, } from "stream-chat-react"; const CustomEditMessageModal = (props: EditMessageModalProps) => ( ); const Component = ({ children }) => ( {children} ); ``` | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------------------------ | | component | [EditMessageModal](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.tsx) | ### EmojiIcon Custom UI component for emoji button in input. | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------------ | | component | [EmojiIconSmall](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) | ### EmptyStateIndicator Custom UI component to be displayed when the `MessageList` is empty. | Type | Default | | --------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | component | [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx) | ### FileUploadIcon (deprecated) Custom UI component for file upload icon. The component is now deprecated. Use [`AttachmentSelectorInitiationButtonContents`](#attachmentselectorinitiationbuttoncontents) instead. | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------------ | | component | [FileUploadIcon](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) | ### GiphyPreviewMessage Custom UI component to render a Giphy preview in the `VirtualizedMessageList`. | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------------------------------ | | component | [GiphyPreviewMessage](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/GiphyPreviewMessage.tsx) | ### HeaderComponent Custom UI component to render at the top of the `MessageList`. | Type | Default | | --------- | ------- | | component | none | ### Input Custom UI component handling how the message input is rendered. | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------------------------- | | component | [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) | ### LinkPreviewList Custom component to render link previews in `MessageInput`. | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------------------------ | | component | [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/LinkPreviewList.tsx) | ### LoadingErrorIndicator Custom UI component to be shown if the channel query fails. | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------------------------------ | | component | [LoadingErrorIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingErrorIndicator.tsx) | ### LoadingIndicator Custom UI component to render while the `MessageList` is loading new messages. | Type | Default | | --------- | -------------------------------------------------------------------------------------------------------------------------- | | component | [LoadingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingIndicator.tsx) | ### Message Custom UI component to display a message in the standard `MessageList`. | Type | Default | | --------- | -------------------------------------------------------------------------------------------------------------------- | | component | [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) | ### MessageActions Custom UI component for message actions popup, accepts no props, all the defaults are set within [MessageActions (unstable)](https://github.com/GetStream/stream-chat-react/blob/master/src/experimental/MessageActions/MessageActions.tsx). | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | component | [MessageActions (unstable)](https://github.com/GetStream/stream-chat-react/blob/master/src/experimental/MessageActions/MessageActions.tsx) | ### MessageBlocked Custom UI component for a moderation-blocked message, defaults to and accepts same props as: [MessageBlocked](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageBlocked.tsx) | Type | Default | | --------- | ---------------------------------------------------------------------------------------------------------------------- | | component | [MessageBlocked](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageBlocked.tsx) | ### MessageBouncePrompt Custom UI component for the content of the modal dialog for messages that got bounced by the moderation rules. | Type | Default | | --------- | -------------------------------------------------------------------------------------------------------------------------------------- | | component | [MessageBouncePrompt](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageBounce/MessageBouncePrompt.tsx) | ### MessageDeleted Custom UI component for a deleted message. | Type | Default | | --------- | ---------------------------------------------------------------------------------------------------------------------- | | component | [MessageDeleted](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageDeleted.tsx) | ### MessageIsThreadReplyInChannelButtonIndicator Custom UI component to indicate a message is a thread reply sent to channel list as well. | Type | Default | | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | component | [MessageIsThreadReplyInChannelButtonIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageIsThreadReplyInChannelButtonIndicator.tsx) | ### MessageListNotifications Custom UI component that displays message and connection status notifications in the `MessageList`. | Type | Default | | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | component | [DefaultMessageListNotifications](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageListNotifications.tsx) | ### MessageNotification Custom UI component to display a notification when scrolled up the list and new messages arrive. | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------------------------------ | | component | [MessageNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageNotification.tsx) | ### MessageOptions Custom UI component for message options popup. | Type | Default | | --------- | ---------------------------------------------------------------------------------------------------------------------- | | component | [MessageOptions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageOptions.tsx) | ### MessageRepliesCountButton Custom UI component to display message replies. | Type | Default | | --------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | component | [MessageRepliesCountButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageRepliesCountButton.tsx) | ### MessageStatus Custom UI component to display message delivery status. | Type | Default | | --------- | -------------------------------------------------------------------------------------------------------------------- | | component | [MessageStatus](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageStatus.tsx) | ### MessageSystem Custom UI component to display system messages. | Type | Default | | --------- | ----------------------------------------------------------------------------------------------------------------------------- | | component | [EventComponent](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EventComponent/EventComponent.tsx) | ### MessageTimestamp Custom UI component to display a timestamp on a message. This does not include a timestamp for edited messages. | Type | Default | | --------- | -------------------------------------------------------------------------------------------------------------------------- | | component | [MessageTimestamp](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageTimestamp.tsx) | See also [`Timestamp`](#timestamp). ### Modal Custom UI component for viewing content in a modal, defaults to and accepts the same props as [Modal](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Modal/Modal.tsx). It is possible to override the default `Modal` component with `GlobalModal` to have the content displayed via React portal at the top of the Chat components tree: ```tsx import { GlobalModal } from "stream-chat-react"; const Component = () => ; ``` Using the `GlobalModal` prevents UI glitches in some browsers (e.g. Safari cutting of the modal overlay to the dimensions of the message list). | Type | Default | | --------- | -------------------------------------------------------------------------------------------------- | | component | [Modal](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Modal/Modal.tsx) | ### ModalGallery Custom UI component for viewing message's image attachments. | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------------ | | component | [ModalGallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/ModalGallery.tsx) | ### PinIndicator Custom UI component to override default pinned message indicator. | Type | Default | | --------- | ----------------------------------------------------------------------------------------------------------- | | component | [PinIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/icons.tsx) | ### PollActions Custom UI component to override default poll actions rendering in a message. | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------------------- | | component | [PollActions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Poll/PollActions/PollActions.tsx) | ### PollContent Custom UI component to override default poll rendering in a message. | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------- | | component | [PollContent](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Poll/PollContent.tsx) | ### PollCreationDialog Custom UI component to override default poll creation dialog contents. | Type | Default | | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | component | [PollCreationDialog](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Poll/PollCreationDialog/PollCreationDialog.tsx) | ### PollHeader Custom UI component to override default poll header in a message. | Type | Default | | --------- | ----------------------------------------------------------------------------------------------------------- | | component | [PollHeader](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Poll/PollHeader.tsx) | ### PollOptionSelector Custom UI component to override default poll option selector. | Type | Default | | --------- | --------------------------------------------------------------------------------------------------------------------------- | | component | [PollOptionSelector](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Poll/PollOptionSelector.tsx) | ### QuotedMessage Custom UI component to override quoted message UI on a sent message. | Type | Default | | --------- | -------------------------------------------------------------------------------------------------------------------- | | component | [QuotedMessage](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/QuotedMessage.tsx) | ### QuotedMessagePreview Custom UI component to override the message input's quoted message preview. | Type | Default | | --------- | --------------------------------------------------------------------------------------------------------------------------------------- | | component | [QuotedMessagePreview](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/QuotedMessagePreview.tsx) | ### QuotedPoll Custom UI component to override the rendering of quoted poll. | Type | Default | | --------- | ----------------------------------------------------------------------------------------------------------- | | component | [QuotedPoll](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Poll/QuotedPoll.tsx) | ### ReactionSelector Custom UI component to display the reaction selector. | Type | Default | | --------- | ---------------------------------------------------------------------------------------------------------------------------- | | component | [ReactionSelector](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionSelector.tsx) | ### ReactionsList Custom UI component to display the list of reactions on a message. | Type | Default | | --------- | ---------------------------------------------------------------------------------------------------------------------- | | component | [ReactionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsList.tsx) | ### ReactionsListModal Custom UI component to display the modal with detailed listing of reactions. The modal is rendered upon clicking on the `ReactionsList`. | Type | Default | | --------- | --------------------------------------------------------------------------------------------------------------------------- | | component | [ReactionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsListModal.tsx) | ### ReminderNotification Custom UI component to display the message reminder information in the Message UI. | Type | Default | | --------- | ---------------------------------------------------------------------------------------------------------------------------------- | | component | [ReminderNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/ReminderNotification.tsx) | ### SendButton Custom UI component for send button. | Type | Default | | --------- | -------------------------------------------------------------------------------------------------------------- | | component | [SendButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) | ### SendToChannelCheckbox Custom UI component allowing to send the composed thread reply to the channel's message list as well. Should be rendered only with thread message composer. | Type | Default | | --------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | component | [SendToChannelCheckbox](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/SendToChannelCheckbox.tsx) | ### TextareaComposer Custom UI component to handle message text input | Type | Default | | --------- | ----------------------------------------------------------------------------------------------------------------------------------- | | component | [TextareaComposer](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TextareaComposer/TextareaComposer.tsx) | ### ThreadHead Custom UI component to be displayed at the beginning of a thread. By default, it is the thread parent message. It is composed of [Message](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/Message.tsx) context provider component and [ThreadStart](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/ThreadStart.tsx) component. The latter can be customized by passing custom component to `Channel` props. The `ThreadHead` component defaults to and accepts the same props as [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx). | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------- | | component | [ThreadHead](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/ThreadHead.tsx) | ### ThreadHeader Custom UI component to display the header of a `Thread`. | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------------ | | component | [DefaultThreadHeader](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/Thread.tsx) | ### ThreadInput Custom UI component to replace the `MessageInput` of a `Thread`. The component uses `MessageInputFlat` by default. | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------------------------- | | component | [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) | ### ThreadStart Custom UI component to display the start of a threaded `MessageList`. | Type | Default | | --------- | ----------------------------------------------------------------------------------------------------------------- | | component | [DefaultThreadStart](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/Thread.tsx) | ### Timestamp Custom UI component to display a date used in timestamps. It's used internally by the default `MessageTimestamp`, and to display a timestamp for edited messages. | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------ | | component | [Timestamp](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/Timestamp.tsx) | ### TypingIndicator Custom UI component for the typing indicator. | Type | Default | | --------- | -------------------------------------------------------------------------------------------------------------------------------- | | component | [TypingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TypingIndicator/TypingIndicator.tsx) | ### UnreadMessagesNotification Custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to `UnreadMessagesSeparator`. | Type | Default | | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | component | [UnreadMessagesNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesNotification.tsx) | ### UnreadMessagesSeparator Custom UI component inserted before the first message marked unread. | Type | Default | | --------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | component | [UnreadMessagesSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesSeparator.tsx) | ### VirtualMessage Custom UI component to display a message in the `VirtualizedMessageList`. | Type | Default | | --------- | -------------------------------------------------------------------------------------------------------------------- | | component | [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) | --- This page was last updated at 2026-04-21T07:55:47.167Z. For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v13/components/contexts/component_context/](https://getstream.io/chat/docs/sdk/react/v13/components/contexts/component_context/).