---
title: "Channel Header"
description: "The bar above the message list, with the channel name, topic and channel actions."
---

The bar above the message list, with the channel name, topic and channel actions. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

_Live example of Channel Header — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add channel-header
```

Files written — React: components/ui/channel-header.tsx. Vue: components/ui/channel-header/ChannelHeader.vue, components/ui/channel-header/ChannelHeaderInfo.vue, components/ui/channel-header/ChannelHeaderIcon.vue, components/ui/channel-header/ChannelHeaderName.vue, components/ui/channel-header/ChannelHeaderDivider.vue, components/ui/channel-header/ChannelHeaderTopic.vue, components/ui/channel-header/ChannelHeaderToolbar.vue, components/ui/channel-header/ChannelHeaderAction.vue, components/ui/channel-header/ChannelHeaderSearch.vue, components/ui/channel-header/ChannelHeaderOnline.vue, components/ui/channel-header/index.ts.

## Usage

React:

```tsx
import { ChannelHeader } from "@/components/ui/channel-header"
```

Vue:

```ts
import { ChannelHeader, ChannelHeaderInfo, ChannelHeaderIcon, ChannelHeaderName, ChannelHeaderDivider, ChannelHeaderTopic, ChannelHeaderToolbar, ChannelHeaderAction, ChannelHeaderSearch, ChannelHeaderOnline } from "@/components/ui/channel-header"
```

## API reference

**`ChannelHeaderAction`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `active` | `boolean \| undefined` | — | Keeps a toggled action (such as the member list) lit up. |

**`ChannelHeaderSearch`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `placeholder` | `string \| undefined` | — | Optional placeholder value. |

The registry exports `ChannelHeader`, `ChannelHeaderInfo`, `ChannelHeaderIcon`, `ChannelHeaderName`, `ChannelHeaderDivider`, `ChannelHeaderTopic`, `ChannelHeaderToolbar`, `ChannelHeaderAction`, `ChannelHeaderSearch`, `ChannelHeaderOnline`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

Every icon-only toolbar action needs an `aria-label`. Preserve the visible focus ring and keep the channel name in the accessible heading hierarchy.

## Tokens

Channel Header reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.