Channel Strip

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @audiocn/channel-strip

channel-strip is layout and context only. Install the meters, faders and toggles you put inside it separately, or install a block that brings everything.

UsageCopy Anchor Link

import {
  ChannelStrip,
  ChannelStripHeader,
  ChannelStripMeter,
  ChannelStripTitle,
} from "@/components/ui/channel-strip";

<ChannelStrip muted={muted}>
  <ChannelStripHeader>
    <ChannelStripTitle>Microphone</ChannelStripTitle>
  </ChannelStripHeader>
  <ChannelStripMeter>
    <LevelMeter source={analyser.meter} />
  </ChannelStripMeter>
</ChannelStrip>

Every part is optional. The smallest useful strip is a title, a meter and a mute toggle.

AnatomyCopy Anchor Link

<ChannelStrip>
  <ChannelStripHeader>
    <ChannelStripIcon />
    <ChannelStripText>
      <ChannelStripTitle />
      <ChannelStripDescription />
    </ChannelStripText>
    <ChannelStripStatus />
    <ChannelStripActions />
  </ChannelStripHeader>
  <ChannelStripMeter />
  <ChannelStripFader />
  <ChannelStripValue />
  <ChannelStripControls />
  <ChannelStripNotice />
</ChannelStrip>

ExamplesCopy Anchor Link

Console stripsCopy Anchor Link

With orientation="vertical", the meter and fader stand side by side.

NoticesCopy Anchor Link

How it passes settings downCopy Anchor Link

A strip provides its orientation, size and disabled state to the audiocn components inside it, so meters and faders line up without extra props. When the strip is muted or dimmed, meters inside it render dimmed. Explicit props on a child always win. useChannelStrip() reads the strip's state in your own parts.

LayoutCopy Anchor Link

Parts place themselves on a CSS grid by area name: header, meter, fader, value, controls and notice. The grid is the strip's channel-strip-layout element, so you can rearrange a strip by overriding grid-template-areas there, for example with *:data-[slot=channel-strip-layout]:[grid-template-areas:…].

A row measures its own width with a container query. Below 36rem it puts the header on its own line, with the meter and fader full width underneath, so rows stay readable on phones and in narrow panels. From 36rem up the header sits beside the meter in a column --channel-strip-header-width wide. Set that variable on a mixer to align every row; the header wraps its status and actions onto a second line before it truncates the title.

A vertical strip keeps its width inside a mixer. When the strips do not fit, the mixer's channels scroll instead of squeezing them.

ThemingCopy Anchor Link

AccessibilityCopy Anchor Link

The strip is a group named by ChannelStripTitle. A notice is a status, or an alert for the destructive variant. State is never shown by colour alone: pair a muted strip with a pressed mute toggle and a status label.

API referenceCopy Anchor Link

ChannelStripCopy Anchor Link

ChannelStripStatusCopy Anchor Link

ChannelStripNoticeCopy Anchor Link