# Thread

The `Thread` component renders a list of replies tied to a single parent message in a channel's main message list.
A `Thread` maintains its own state and renders its own `MessageList` and `MessageInput` components. Each piece of
rendered UI can be overridden with custom components either drawn from the `ComponentContext` or supplied via props.

The `Thread` component consumes the contexts established in [`Channel`](/chat/docs/sdk/react/v11/components/core-components/channel/) and does not have any required props.

## Basic Usage

As a context consumer, the `Thread` component must be rendered as a child of the `Channel` component. To enable
smooth `Thread` mount and unmount behavior, wrap the main channel components in the [`Window`](/chat/docs/sdk/react/v11/components/utility-components/window/)
component. `Window` handles width changes in the main channel to ensure a seamless user experience when opening and
closing a `Thread`.

```jsx
<Chat client={client}>
  <ChannelList />
  <Channel>
    <Window>
      <MessageList />
      <MessageInput />
    </Window>
    <Thread />
  </Channel>
</Chat>
```

## UI Customization

Since a `Thread` contains most of the pieces of a `Channel` component, just in an encapsulated form, many aspects
and components can be customized in a similar way. The UI components for both [`Message`](/chat/docs/sdk/react/v11/components/message-components/message/)
and [`MessageInput`](/chat/docs/sdk/react/v11/components/message-input-components/message-input/) can be overridden via props if you desire different
UI from the styles rendered in the main `Channel`. `ThreadHeader` and `ThreadStart` are two overridable UI
components unique to `Thread` that can be drawn from the `ComponentContext`.

**Example 1** - The below example shows how to render different UI for messages and the input within a `Thread`,
versus those rendered in the main `Channel`.

<admonition type="note">

A common pattern we use in the library is to first check props to see if a value/component exists, and if not,
pull from context.

</admonition>

```jsx
const MainInput = (props) => {
  // render main `MessageInput` UI component here
};

const MainMessage = (props) => {
  // render main `Message` UI component here
};

const ThreadInput = (props) => {
  // render thread `MessageInput` UI component here
};

const ThreadMessage = (props) => {
  // render thread `Message` UI component here
};

<Chat client={client}>
  <ChannelList />
  <Channel Input={MainInput} Message={MainMessage}>
    <Window>
      <MessageList />
      <MessageInput />
    </Window>
    <Thread Input={ThreadInput} Message={ThreadMessage} />
  </Channel>
</Chat>;
```

**Example 2** - The below example shows how to provide custom UI for the `ThreadHeader` and `ThreadStart`
components. `ThreadHeader` is rendered above the UI for the thread's parent `Message` component and at the
top of the `Thread`. `ThreadStart` serves as a separator between the parent message and the `MessageList` of replies.

```jsx
const CustomThreadHeader = (props) => {
  // render thread header UI component here
};

const CustomThreadStart = (props) => {
  // render thread start UI component here
};

<Chat client={client}>
  <ChannelList />
  <Channel ThreadHeader={CustomThreadHeader} ThreadStart={CustomThreadStart}>
    <Window>
      <MessageList />
      <MessageInput />
    </Window>
    <Thread />
  </Channel>
</Chat>;
```

**Example 3** - To customize the combo of the thread's parent message and the `ThreadStart` separator, you can create a custom `ThreadHead` component and pass it to the `Channel` props. It then will be stored in the [`ComponentContext['ThreadHead']`](/chat/docs/sdk/react/v11/components/contexts/component-context#threadhead)

```jsx
const CustomThreadHead = (props) => {
  // render thread header UI component here
};

<Chat client={client}>
  <ChannelList />
  <Channel ThreadHead={CustomThreadHead} ThreadStart={CustomThreadStart}>
    <Window>
      <MessageList />
      <MessageInput />
    </Window>
    <Thread />
  </Channel>
</Chat>;
```

## Props

### additionalMessageInputProps

Additional props to be passed to the underlying [`MessageInput`](/chat/docs/sdk/react/v11/components/message-input-components/message-input/) component.

| Type   |
| ------ |
| object |

### additionalMessageListProps

Additional props to be passed to the underlying [`MessageList`](/chat/docs/sdk/react/v11/components/core-components/message-list/) component.

| Type   |
| ------ |
| object |

### additionalParentMessageProps

Additional props to be passed to the underlying [`Message`](/chat/docs/sdk/react/v11/components/message-components/message/) component, which represents the
thread's parent message.

| Type   |
| ------ |
| object |

### additionalVirtualizedMessageListProps

Additional [props for `VirtualizedMessageList`](/chat/docs/sdk/react/v11/components/core-components/virtualized-list/#props/) component.

| Type   |
| ------ |
| object |

### autoFocus

If true, focuses the `MessageInput` component on opening a thread.

| Type    | Default |
| ------- | ------- |
| boolean | true    |

### enableDateSeparator

Controls injection of [DateSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/DateSeparator/DateSeparator.tsx) UI component into underlying `MessageList` or `VirtualizedMessageList`.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### fullWidth

If true, displays the thread at 100% width of its parent container, useful for mobile styling.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### Input

Custom thread input UI component used to override the optional `Input` value stored in `ComponentContext` or the default. For the applications using [theme version 1](/chat/docs/sdk/react/v11/guides/theming/css-and-theming/), the default is `MessageInputSmall`. Applications using [theme version 2](/chat/docs/sdk/react/v11/theming/themingv2/) will use `MessageInputFlat` by default.

| Type      | Default                                                                                                                                                                                                                                                                                   |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| component | [MessageInputSmall (theme v1)](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputSmall.tsx) / [MessageInputFlat (theme v2)](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) |

### Message

Custom thread message UI component used to override the default `Message` value stored in `ComponentContext`.

| Type      | Default                                                                                               |
| --------- | ----------------------------------------------------------------------------------------------------- |
| component | [ComponentContext['Message']](/chat/docs/sdk/react/v11/components/contexts/component-context#message) |

### messageActions

Array of allowed message actions (ex: 'edit', 'delete', 'reply'). To disable all actions, provide an empty array.

| Type  | Default                                                              |
| ----- | -------------------------------------------------------------------- |
| array | ['edit', 'delete', 'flag', 'mute', 'pin', 'quote', 'react', 'reply'] |

### virtualized

If true, render the `VirtualizedMessageList` instead of the standard `MessageList` component.

| Type    |
| ------- |
| boolean |


---

This page was last updated at 2026-07-09T16:01:13.071Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v11/components/core-components/thread/](https://getstream.io/chat/docs/sdk/react/v11/components/core-components/thread/).