---
title: "Channel Info"
description: "The channel detail panel that covers a channel on narrow screens."
---

The channel detail panel that covers a channel on narrow screens. 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 Info — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add channel-info
``` Registry dependencies, installed with it: tabs.

Files written — React: components/ui/channel-info.tsx. Vue: components/ui/channel-info/ChannelInfo.vue, components/ui/channel-info/ChannelInfoToolbar.vue, components/ui/channel-info/ChannelInfoActions.vue, components/ui/channel-info/ChannelInfoAction.vue, components/ui/channel-info/ChannelInfoIdentity.vue, components/ui/channel-info/ChannelInfoIcon.vue, components/ui/channel-info/ChannelInfoName.vue, components/ui/channel-info/ChannelInfoType.vue, components/ui/channel-info/ChannelInfoPanel.vue, components/ui/channel-info/ChannelInfoEmpty.vue, components/ui/channel-info/ChannelInfoEmptyIcon.vue, components/ui/channel-info/ChannelInfoEmptyTitle.vue, components/ui/channel-info/ChannelInfoEmptyBody.vue, components/ui/channel-info/index.ts.

## Usage

React:

```tsx
import { ChannelInfo } from "@/components/ui/channel-info"
```

Vue:

```ts
import { ChannelInfo, ChannelInfoToolbar, ChannelInfoActions, ChannelInfoAction, ChannelInfoIdentity, ChannelInfoIcon, ChannelInfoName, ChannelInfoType, ChannelInfoPanel, ChannelInfoEmpty, ChannelInfoEmptyIcon, ChannelInfoEmptyTitle, ChannelInfoEmptyBody } from "@/components/ui/channel-info"
```

## API reference

**`ChannelInfo`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children / default slot` | `React.ReactNode / Vue slot` | — | Content rendered inside the component. |
| `className / class` | `string` | — | Additional classes merged with the component defaults. |

The registry exports `ChannelInfo`, `ChannelInfoToolbar`, `ChannelInfoActions`, `ChannelInfoAction`, `ChannelInfoIdentity`, `ChannelInfoIcon`, `ChannelInfoName`, `ChannelInfoType`, `ChannelInfoPanel`, `ChannelInfoEmpty`, `ChannelInfoEmptyIcon`, `ChannelInfoEmptyTitle`, `ChannelInfoEmptyBody`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

Preserve the native semantics of the rendered elements and pass through ARIA attributes when the surrounding context needs a label or description. Any interactive child needs a visible focus indicator, and meaning must not rely on colour alone.

## Tokens

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