# Channel Detail

`ChannelDetail` is a composable surface for inspecting and managing a single channel. It renders channel info, members, pinned messages, shared media, and shared files, and adapts between a tabbed/docked layout (wide containers) and an inline hamburger-driven drawer (narrow containers).

It ships as a separate plugin entry point, `stream-chat-react/channel-detail`, with its own stylesheet. The component composes the generic [`SectionNavigator`](https://getstream.io/chat/docs/sdk/react/components/channel-detail/section-navigator/) primitive with five default sections and provides the active `channel` to its children through `ChannelDetailContext`.

## Installation

`ChannelDetail` is not exported from the package root. Import it (and the views, hooks, and primitives it ships with) from the plugin entry point, and load the plugin stylesheet alongside the core CSS:

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

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

## Recommended patterns

The examples below fold the recommended practices into working code — read the inline comments for the rationale behind each one.

### Render it in a sized side panel

`ChannelDetail` measures its container with a `ResizeObserver` and switches layout accordingly, so it needs a sized parent to lay out correctly. It also never reads the active channel from context — you pass it in, so you stay in control of which channel it inspects.

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

const ChannelInfoPanel = () => {
  // Pass `channel` explicitly — ChannelDetail does not pull it from context,
  // so you decide which channel the surface inspects.
  const { channel } = useChannelStateContext();

  return (
    // Give it a measurable, sized container. The ResizeObserver picks the
    // layout from this width: wide → docked `tabs`, narrow → `inline` drawer.
    <aside style={{ width: 360, height: "100%" }}>
      <ChannelDetail channel={channel} />
    </aside>
  );
};
```

With the five default sections, this renders **Channel info**, **Members**, **Pinned messages**, **Photos & videos**, and **Files**.

### Open details from the channel header avatar

For the common "click the header avatar to open details in a modal" behavior, use [`AvatarWithChannelDetail`](https://getstream.io/chat/docs/sdk/react/components/channel-detail/avatar-with-channel-detail/) rather than wiring a modal around `ChannelDetail` yourself.

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

// No sizing or channel wiring needed here: the modal sizes the surface, and
// AvatarWithChannelDetail reads the active channel from ChannelStateContext.
<ChannelHeader Avatar={AvatarWithChannelDetail} />;
```

### Adjust the surface instead of rebuilding it

Customize through the `sections` prop or by overriding individual [views](https://getstream.io/chat/docs/sdk/react/components/channel-detail/views/) — everything you don't replace keeps its built-in behavior, including the confirmation dialogs that gate destructive actions (leave/delete, block/unblock).

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

// Start from the defaults and tweak — here, drop the Files section — instead
// of assembling the surface from scratch. The sections you keep retain their
// behavior, so destructive actions stay gated behind their confirmation dialogs.
const sections = defaultChannelDetailSections.filter(
  (section) => section.id !== "channel-files",
);

<ChannelDetail channel={channel} sections={sections} />;
```

## Layout

`ChannelDetail` switches between two layouts based on its container width:

- `tabs` — a docked navigation sidebar with the active section beside it (the default).
- `inline` — a single-column view with a hamburger button that opens the navigation as a drawer overlay.

The breakpoint is controlled by `tabsLayoutMinWidth` (default `640`px). Below it, the component uses the `inline` layout. Set `defaultLayout` to choose the layout used before the container has been measured.

```tsx
<ChannelDetail
  channel={channel}
  defaultLayout="inline"
  tabsLayoutMinWidth={720}
/>
```

## UI Customization

### Choose or reorder sections

Each section is a `{ id, NavButton, SectionContent }` descriptor. Pass a `sections` array to add, remove, or reorder them. The plugin exports the default sections and the individual section descriptors so you can reuse them:

```tsx
import {
  ChannelDetail,
  ChannelManagementView,
  ChannelMembersView,
  PinnedMessagesView,
  ChannelManagementNavButton,
  ChannelMembersNavButton,
  PinnedMessagesNavButton,
} from "stream-chat-react/channel-detail";

const sections = [
  {
    id: "channel-info",
    NavButton: ChannelManagementNavButton,
    SectionContent: ChannelManagementView,
  },
  {
    id: "channel-members",
    NavButton: ChannelMembersNavButton,
    SectionContent: ChannelMembersView,
  },
  {
    id: "pinned-messages",
    NavButton: PinnedMessagesNavButton,
    SectionContent: PinnedMessagesView,
  },
];

const App = ({ channel }) => (
  <ChannelDetail channel={channel} sections={sections} />
);
```

To replace the contents of a section while keeping its nav button, supply a custom `SectionContent`. A section's content component receives the current `layout` and can read the channel through `useChannelDetailContext`. See [Views](https://getstream.io/chat/docs/sdk/react/components/channel-detail/views/) for the props each built-in view accepts.

### Add a custom section

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

const NotificationsSection: SectionNavigatorSection = {
  id: "notifications",
  NavButton: ({ select, selected }) => (
    <button onClick={select} aria-pressed={selected}>
      Notifications
    </button>
  ),
  SectionContent: () => <NotificationSettings />,
};

<ChannelDetail
  channel={channel}
  sections={[...defaultChannelDetailSections, NotificationsSection]}
/>;
```

## Reading the channel from descendants

`ChannelDetail` wraps its content in `ChannelDetailProvider`. Custom views and nav buttons can read the active channel with `useChannelDetailContext`:

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

const MemberCount = () => {
  const { channel } = useChannelDetailContext();
  return <span>{channel.data?.member_count} members</span>;
};
```

Calling `useChannelDetailContext` outside of `ChannelDetail` (or a `ChannelDetailProvider`) throws.

## Props

`ChannelDetail` accepts every [`SectionNavigator`](https://getstream.io/chat/docs/sdk/react/components/channel-detail/section-navigator/) prop except `sections` (whose shape is the same but whose default differs), plus the following.

| Name                 | Description                                                                               | Type                        | Default                        |
| -------------------- | ----------------------------------------------------------------------------------------- | --------------------------- | ------------------------------ |
| `channel`            | The channel to inspect and manage. **Required.**                                          | `Channel`                   | -                              |
| `sections`           | The sections to render, each a `{ id, NavButton, SectionContent }` descriptor.            | `SectionNavigatorSection[]` | `defaultChannelDetailSections` |
| `defaultLayout`      | Layout used before the container is measured.                                             | `"tabs" \| "inline"`        | `"tabs"`                       |
| `tabsLayoutMinWidth` | Minimum container width (px) for the `tabs` layout; below it the `inline` layout is used. | `number`                    | `640`                          |
| `className`          | Additional class name applied to the root element.                                        | `string`                    | -                              |

## Exports

The plugin's main exports for this surface:

| Export                                                                                                                               | Description                                             |
| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------- |
| `ChannelDetail`                                                                                                                      | The main component.                                     |
| `defaultChannelDetailSections`                                                                                                       | The five default section descriptors.                   |
| `ChannelManagementNavButton`, `ChannelMembersNavButton`, `PinnedMessagesNavButton`, `ChannelMediaNavButton`, `ChannelFilesNavButton` | The default nav buttons for each section.               |
| `ChannelDetailProvider`                                                                                                              | Provider that exposes the active channel.               |
| `useChannelDetailContext`                                                                                                            | Hook returning `{ channel }` from the nearest provider. |

The view components, search hooks, and primitives are documented separately in [Views](https://getstream.io/chat/docs/sdk/react/components/channel-detail/views/), [`SectionNavigator`](https://getstream.io/chat/docs/sdk/react/components/channel-detail/section-navigator/), and [`AvatarWithChannelDetail`](https://getstream.io/chat/docs/sdk/react/components/channel-detail/avatar-with-channel-detail/).


---

This page was last updated at 2026-08-24T21:13:39.502Z.

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