# Block mid side

> A mid/side device you can plug in: its state, a panel with a handle for the mid and the side and an engine that plays it. Play a wide loop through it and take the side down

A shadcn/ui block from the [@audio-ui](https://www.audio-ui.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/audio-ui/block-mid-side).

- Page, with a live preview: https://shadcn.exchange/r/audio-ui/block-mid-side
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/audio-ui/block-mid-side-light-de033fffefb2913e.png
- Registry item: https://www.audio-ui.dev/r/new-york-v4/block-mid-side.json
- Listed: 2026-10-17, source last changed 2026-10-17

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/audio-ui/block-mid-side.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `@audio-ui/react`
- Registry items: `@audio-ui/mid-side-panel`, `@audio-ui/mid-side-device`, `@audio-ui/mid-side-engine`, `@audio-ui/demo-loop`, `@audio-ui/play-toggle`, `@audio-ui/use-device-loop`, `@audio-ui/use-master-bus`

## Files

### `block-mid-side.tsx`

```tsx
"use client";

import { useState } from "react";
import { PlayToggle } from "@/components/audio-ui/play-toggle";
import { MidSidePanel } from "@/components/audio-ui/devices/mid-side/panel";
import { useDeviceLoop } from "@/hooks/use-device-loop";
import { useMasterBus } from "@/hooks/use-master-bus";
import { renderWideLoop } from "@/lib/demo-loop";
import {
  type MidSideState,
  midSideDevice,
} from "@/components/audio-ui/devices/mid-side/device";
import { createMidSideEngine } from "@/components/audio-ui/devices/mid-side/engine";

const MASTER_VOLUME = 0.7;

/**
 * A mid/side device you can plug in: its state, a panel with a handle for the
 * mid and the side and an engine that plays it, each its own file and none
 * knowing the others. It plays the drums, which sit in the centre, over a wide
 * pad: take the side down and the pad closes in on the drums, turn Bass mono up
 * and the low note leaves the sides.
 */
export function BlockMidSide() {
  const [state, setState] = useState<MidSideState>(() =>
    midSideDevice.defaults()
  );
  const master = useMasterBus(MASTER_VOLUME);
  const { playing, toggle } = useDeviceLoop({
    create: createMidSideEngine,
    destination: master,
    signal: renderWideLoop,
    state,
  });
  return (
    <div className="rounded-xl h-full w-full min-w-0">
      <MidSidePanel onValueChange={setState} value={state}>
        <PlayToggle
          label="Play a wide loop through it"
          onToggle={toggle}
          playing={playing}
        />
      </MidSidePanel>
    </div>
  );
}
```