# Thread

`Thread` renders a parent message together with its replies. It manages its own list and composer and consumes the surrounding `Channel` contexts.

## Best Practices

- Wrap the main channel content in `Window` so the layout stays stable when the thread opens.
- Use the `Message` prop and `additionalMessageComposerProps` only when the thread UX truly differs from the main channel.
- Customize `ThreadHeader`, `ThreadHead`, and `ThreadStart` through `WithComponents`.
- Use `virtualized` for long-running or high-volume threads.
- Keep thread message actions aligned with the main channel unless the product intentionally differs.

## Basic Usage

```tsx
import {
  Channel,
  ChannelHeader,
  MessageComposer,
  MessageList,
  Thread,
  Window,
} from "stream-chat-react";

const App = () => (
  <Channel>
    <Window>
      <ChannelHeader />
      <MessageList />
      <MessageComposer />
    </Window>
    <Thread />
  </Channel>
);
```

## UI Customization

`Thread` supports two customization layers:

- local `Thread` props for the thread message UI and composer behavior
- `WithComponents` overrides for shared thread surfaces such as `ThreadHeader`, `ThreadHead`, `ThreadStart`, and `MessageComposerUI`

### Different UI for the main channel and the thread

```tsx
import {
  Channel,
  ChannelHeader,
  MessageComposer,
  MessageList,
  Thread,
  Window,
  WithComponents,
  useMessageContext,
} from "stream-chat-react";

const MainMessage = () => {
  const { message } = useMessageContext();
  return <div>{message.text}</div>;
};

const ThreadMessage = () => {
  const { message } = useMessageContext();
  return <div className="thread-message">{message.text}</div>;
};

const MainComposerUI = () => <div>Main composer</div>;
const ThreadComposerUI = () => <div>Thread composer</div>;

const App = () => (
  <WithComponents
    overrides={{
      Message: MainMessage,
      MessageComposerUI: MainComposerUI,
    }}
  >
    <Channel>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageComposer />
      </Window>
      <WithComponents overrides={{ MessageComposerUI: ThreadComposerUI }}>
        <Thread Message={ThreadMessage} />
      </WithComponents>
    </Channel>
  </WithComponents>
);
```

### Custom `ThreadHeader`, `ThreadHead`, and `ThreadStart`

```tsx
import { Thread, WithComponents } from "stream-chat-react";

const CustomThreadHeader = (props) => <div>Custom thread header</div>;
const CustomThreadHead = (props) => <div>Custom parent message section</div>;
const CustomThreadStart = () => <div>Replies start here</div>;

const ThreadPanel = () => (
  <WithComponents
    overrides={{
      ThreadHead: CustomThreadHead,
      ThreadHeader: CustomThreadHeader,
      ThreadStart: CustomThreadStart,
    }}
  >
    <Thread />
  </WithComponents>
);
```

## Props

| Prop                                    | Description                                                                   | Type                                           |
| --------------------------------------- | ----------------------------------------------------------------------------- | ---------------------------------------------- |
| `additionalMessageComposerProps`        | Extra props passed to the underlying `MessageComposer`.                       | `MessageComposerProps`                         |
| `additionalMessageListProps`            | Extra props passed to the underlying `MessageList`.                           | `MessageListProps`                             |
| `additionalParentMessageProps`          | Extra props passed to the parent `Message` rendered at the top of the thread. | `Partial<MessageProps>`                        |
| `additionalVirtualizedMessageListProps` | Extra props passed to the underlying `VirtualizedMessageList`.                | `VirtualizedMessageListProps`                  |
| `autoFocus`                             | Focuses the thread input when the thread opens.                               | `boolean`                                      |
| `enableDateSeparator`                   | Enables date separators inside the thread list.                               | `boolean`                                      |
| `Message`                               | Thread-specific message UI.                                                   | `React.ComponentType<MessageUIComponentProps>` |
| `messageActions`                        | Allowed message actions inside the thread.                                    | `MessageActionsArray`                          |
| `virtualized`                           | Uses `VirtualizedMessageList` instead of `MessageList` for replies.           | `boolean`                                      |


---

This page was last updated at 2026-04-22T14:09:45.088Z.

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