## Mixer Faders (S—306)

A small mixing desk: vertical faders with dB readouts, mute and solo per channel, live level meters and a master.

- URL: https://sundaeui.dev/components/mixer-faders
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/mixer-faders.json`
- Tags: mixer, faders, music, audio, levels, daw

Each channel has a vertical fader from −∞ to +6 dB, a mute and a solo. Solo silences every channel that is not soloed, the way a real desk does.
Meters bounce with a simulated signal scaled by the fader; the master fader scales them all.

### Usage

```tsx
import { MixerFaders } from '@/components/sundae/mixer-faders'

<MixerFaders />
```

### Props

- `channels` (`{ id: string; name: string; db: number }[]`, required): Channels.
- `onChange` (`(c) => void`): Called on change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Audio apps, streaming setups, podcast tools.

### When not to use

- Precise automation: use a DAW.

### Accessibility

- Faders are vertical sliders with dB value text; arrow keys step by 1 dB.
- Mute and solo are toggle buttons per channel.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ↑ / ↓: Move a focused fader by 1 dB
- Shift + ↑ / ↓: By 6 dB