# Avatar with Channel Detail

`AvatarWithChannelDetail` is a drop-in [`ChannelAvatar`](/chat/docs/sdk/react/components/utility-components/avatar/) variant that opens [`ChannelDetail`](/chat/docs/sdk/react/components/channel-detail/channel-detail/) in a modal when clicked. It is the quickest way to wire channel details into an existing UI: render it where you currently render the channel avatar (typically the `ChannelHeader`), and the detail surface comes along for free.

Unlike `ChannelDetail`, this component reads the active `channel` from `ChannelStateContext`, so it must be rendered inside a `Channel`.

## Installation

```tsx
import { AvatarWithChannelDetail } from "stream-chat-react/channel-detail";

import "stream-chat-react/css/v2/index.css";
import "stream-chat-react/dist/css/channel-detail.css";
```

## Wire it into the channel header

Render `AvatarWithChannelDetail` wherever you render the channel avatar — typically the `ChannelHeader` — and the detail modal comes along for free.

```tsx
import { Channel, Window, ChannelHeader } from "stream-chat-react";
import { AvatarWithChannelDetail } from "stream-chat-react/channel-detail";

const App = () => (
  // Must be inside <Channel>: the component reads the active channel from
  // ChannelStateContext (unlike ChannelDetail, which takes `channel` directly).
  <Channel>
    <Window>
      {/* Drop-in replacement for the header avatar — no modal wiring needed.
          The component manages open/close state and the accessibility labels
          (aria-label "Open channel details", modal label "Channel details"). */}
      <ChannelHeader Avatar={AvatarWithChannelDetail} />
      {/* ... */}
    </Window>
  </Channel>
);
```

Clicking the avatar opens `ChannelDetail` for the active channel inside a modal.

## UI Customization

### Provide a custom avatar visual

Pass an `Avatar` component to control how the avatar itself renders while keeping the click-to-open behavior:

```tsx
<AvatarWithChannelDetail Avatar={MyChannelAvatar} />
```

### Customize the detail surface

Pass a custom `ChannelDetail` to adjust what opens in the modal — for example a preconfigured `ChannelDetail` with your own `sections`:

```tsx
import {
  ChannelDetail,
  AvatarWithChannelDetail,
} from "stream-chat-react/channel-detail";

// Override `ChannelDetail` to adjust what opens in the modal (here, custom
// sections) instead of re-implementing the modal yourself.
const ChannelDetailWithCustomSections = (props) => (
  <ChannelDetail {...props} sections={mySections} />
);

<AvatarWithChannelDetail ChannelDetail={ChannelDetailWithCustomSections} />;
```

## Props

`AvatarWithChannelDetail` accepts all [`ChannelAvatar`](/chat/docs/sdk/react/components/utility-components/avatar/) props (forwarded to the rendered avatar), plus the following.

| Name            | Description                                                                                                                                                     | Type                                      | Default         |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | --------------- |
| `Avatar`        | Component used to render the avatar visual. Falls back to the `ComponentContext` `Avatar` (unless that is this component), then to the default `ChannelAvatar`. | `React.ComponentType<ChannelAvatarProps>` | `ChannelAvatar` |
| `ChannelDetail` | Component rendered inside the modal. Receives the active `channel`.                                                                                             | `React.ComponentType<ChannelDetailProps>` | `ChannelDetail` |
| `className`     | Class name applied to the avatar visual.                                                                                                                        | `string`                                  | -               |

> The modal open/close state is managed internally. The component uses the `Modal` from `ComponentContext` (defaulting to the SDK `GlobalModal`), so the default works out of the box — you only need to register a custom `Modal` via `WithComponents` if you want a different dialog shell, and that override applies here too.


---

This page was last updated at 2026-06-25T10:44:12.812Z.

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