# Window

`Window` handles layout changes in the main channel when opening and closing a `Thread`.

## Best Practices

- Always wrap main channel UI in `Window` when using threads.
- Keep `Window` alongside `Thread` to prevent layout shifts.
- Avoid manual layout hacks; rely on `Window` for thread transitions.
- Use the `thread` prop only for custom thread-opening flows.
- Test window behavior across mobile and desktop breakpoints.

## Basic Usage

`Window` should wrap the main channel UI and be rendered alongside `Thread`. This keeps layout changes smooth when threads open and close.

```tsx
<Chat client={client}>
  <Channel channel={channel}>
    <Window>
      <MessageList />
      <MessageInput />
    </Window>
    <Thread />
  </Channel>
</Chat>
```

## Props

### thread

An optional prop to manually trigger the opening of a thread.

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


---

This page was last updated at 2026-04-21T07:55:45.438Z.

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