---
title: "Voice Channel Row"
description: "A sidebar voice channel row with a collapsible header and the list of connected members."
---

A sidebar voice channel row with a collapsible header and the list of connected members. 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 Voice Channel Row — see the page for the rendered demo._

## Installation

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

Files written — React: components/ui/voice-channel.tsx. Vue: components/ui/voice-channel/VoiceChannel.vue, components/ui/voice-channel/VoiceChannelHeader.vue, components/ui/voice-channel/VoiceChannelIcon.vue, components/ui/voice-channel/VoiceChannelMembers.vue, components/ui/voice-channel/VoiceChannelMember.vue, components/ui/voice-channel/VoiceChannelMemberIcons.vue, components/ui/voice-channel/index.ts.

## Usage

React:

```tsx
import { VoiceChannel } from "@/components/ui/voice-channel"
```

Vue:

```ts
import { VoiceChannel, VoiceChannelHeader, VoiceChannelIcon, VoiceChannelMembers, VoiceChannelMember, VoiceChannelMemberIcons } from "@/components/ui/voice-channel"
```

## API reference

**`VoiceChannelMemberIcons`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `muted` | `boolean \| undefined` | — | Renders the icons in the dnd color to signal a muted / deafened member. |

The registry exports `VoiceChannel`, `VoiceChannelHeader`, `VoiceChannelIcon`, `VoiceChannelMembers`, `VoiceChannelMember`, `VoiceChannelMemberIcons`. 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

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