Channel Strip

Layout shell for channel-style columns—header, sections with label, control, and readout, and footer—with vertical or horizontal orientation.

Channel strip layout for grouping labels, controls, and value readouts in a mixer-style column. The registry component wraps ChannelStrip primitives from @audio-ui/react with card chrome, orientation-aware spacing, and header/footer layout presets.

Channel 1

Volume

72%

Overview

Interaction model: The strip wrapper does not handle pointer, wheel, or keyboard input; those behaviors come from the controls you render inside each ChannelStripSection.
Layout: Vertical (default) or horizontal orientation; optional ChannelStripHeader and ChannelStripFooter. With a footer, the styled root uses a responsive grid on wide screens so header and footer stay in distinct grid areas.
Composition: One ChannelStripSection per control line (label, control slot, readout). On a vertical strip, ChannelStripContent supports layout="row" so multiple sections sit side by side from the md breakpoint (flex row + wrap), and stack in one column on smaller viewports.
Accessibility: The root is a section with header/footer landmarks where used. ChannelStripValue is an output with aria-live="polite". Name the strip with aria-label or aria-labelledby; wire controls with id / aria-label / aria-labelledby as usual.

Installation

pnpm dlx shadcn@latest add @audio/channel-strip

Usage

import {
  ChannelStrip,
  ChannelStripContent,
  ChannelStripFooter,
  ChannelStripHeader,
  ChannelStripLabel,
  ChannelStripSection,
  ChannelStripValue,
} from "@/components/audio/elements/channel-strip";

Vertical (default) - header, one section, footer:

<ChannelStrip aria-label="Strip">
  <ChannelStripHeader>Channel 1</ChannelStripHeader>
  <ChannelStripContent>
    <ChannelStripSection>
      <ChannelStripLabel>Level</ChannelStripLabel>
      {/* your control */}
      <ChannelStripValue>—</ChannelStripValue>
    </ChannelStripSection>
  </ChannelStripContent>
  <ChannelStripFooter>Metadata</ChannelStripFooter>
</ChannelStrip>

Horizontal - set orientation on the root:

<ChannelStrip aria-label="Strip" orientation="horizontal">
  <ChannelStripHeader>Channel 1</ChannelStripHeader>
  <ChannelStripContent>
    <ChannelStripSection>{/* label, control, readout */}</ChannelStripSection>
  </ChannelStripContent>
  <ChannelStripFooter>Metadata</ChannelStripFooter>
</ChannelStrip>

Sections in a row (vertical strip) — responsive flex, not CSS Grid; narrow screens stack, from md up sections share a row and wrap if needed:

<ChannelStrip aria-label="Strip">
  <ChannelStripHeader>Channel 1</ChannelStripHeader>
  <ChannelStripContent layout="row">
    <ChannelStripSection>{/* A */}</ChannelStripSection>
    <ChannelStripSection>{/* B */}</ChannelStripSection>
  </ChannelStripContent>
  <ChannelStripFooter>Metadata</ChannelStripFooter>
</ChannelStrip>

Interaction

Pointer

Behavior	Details
Strip root	Not an interactive target; pointer gestures are handled by child controls (`Fader`, `Knob`, etc.).
Sections	Layout only; hit testing applies to controls you place inside each section.

Keyboard

Key	Action
`Tab` / `Shift+Tab`	Moves focus among focusable elements inside the strip in DOM order.

The strip root is not focused as a control; there is no strip-level shortcut table beyond focus navigation.

Export	Element	Role
`ChannelStrip`	`section`	Root; orientation and card chrome.
`ChannelStripHeader`	`header`	Optional title region.
`ChannelStripContent`	`div`	Required wrapper for sections.
`ChannelStripSection`	`div`	One label / control / value group.
`ChannelStripLabel`	`span`	Section label.
`ChannelStripValue`	`output`	Readout.
`ChannelStripFooter`	`footer`	Optional footer region.

Root props

Prop	Type	Default	Description
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Layout direction.
`className`	`string`	-	Classes on the root `section`.

`ChannelStripContent`

Prop	Type	Default	Description
`layout`	`"stack" \| "row"`	`"stack"`	`stack`: sections in a column. `row` (vertical strip only in the styled registry): sections in a row from `md` with `flex-wrap`, stacked on small viewports.
`className`	`string`	-	Classes on the content wrapper.