mui-audio-ui

React UI components for audio plugin interfaces — knobs, sliders, and controls designed for VST/AU plugins and DAW-style UIs. Built on MUI and fully theme-aware.

Currently ships a polished, accessible Knob component. More controls are on the way.

Features

• SVG rotary knob with a 270° arc sweep, value track, and indicator
• Multiple interactions — vertical drag, scroll wheel, and keyboard focus
• Theme-aware — inherits MUI palette tokens (text.secondary, primary.main) so it looks correct in light or dark mode
• Accessible — role="slider" with aria-* values and focus-visible styling
• Plugin-friendly — onDragStart / onDragEnd lifecycle hooks for DAW gesture notifications
• Zero-runtime CSS — pure inline styles via MUI's sx, no stylesheet import required

Install

npm install mui-audio-ui

Peer dependencies

This library expects the host app to provide React and MUI:

{
  "react": "^18.0.0 || ^19.0.0",
  "react-dom": "^18.0.0 || ^19.0.0",
  "@mui/material": "^5.0.0 || ^6.0.0 || ^9.0.0",
  "@mui/icons-material": "^5.0.0 || ^6.0.0 || ^9.0.0",
  "@emotion/react": "^11.0.0",
  "@emotion/styled": "^11.0.0"
}

Usage

import { useState } from "react";
import { MuiAudioKnob } from "mui-audio-ui";

export function GainControl() {
  const [value, setValue] = useState(0.5);

  return (
    <MuiAudioKnob
      label="Gain"
      info="Output level (0–100%)"
      value={value}
      onChange={setValue}
      valueDisplay={`${Math.round(value * 100)}%`}
      // accentColor="#6f86e8"  // optional; defaults to the MUI primary blue
    />
  );
}

The MuiAudioKnob works with a normalized 0–1 value. Convert from your parameter's actual range when reading and writing:

// 0–1  <->  -inf..+12 dB
const toParam = (v: number) => v * 12;        // 0..1 -> 0..12
const fromParam = (db: number) => db / 12;    // 0..12 -> 0..1

<MuiAudioKnob value={fromParam(gainDb)} onChange={(v) => setGainDb(toParam(v))} />

Components

MuiAudioKnob

A rotary control with an arc track that fills as the value increases.

| Prop | Type | Default | Description | | ----------------- | -------------------------- | ------------ | ----------------------------------------------------------------- | | value | number | — | Value between 0 and 1. Required. | | onChange | (value: number) => void | — | Called with a new value (0–1) on each change. Required. | | onDragStart | () => void | — | Fired when a drag gesture begins (notify the DAW). | | onDragEnd | () => void | — | Fired when a drag gesture ends. | | label | string | — | Label displayed above the knob (uppercase caption). | | info | string | — | Help text shown in a tooltip on hover. | | size | number | 52 | Diameter of the knob SVG in px. | | dragSensitivity | number | 200 | Pixels of vertical drag for the full 0→1 range. | | accentColor | string | "#6f86e8" | Accent color for the value arc and focus ring. | | valueDisplay | string | — | Text shown below the knob on hover/drag (e.g. "42%"). | | className | string | — | Additional CSS class on the root element. |

Development

Clone and run the demo app:

npm install
npm run dev       # Vite demo playground at localhost:5173

| Command | Description | | ------------------- | -------------------------------------------- | | npm run dev | Start the Vite demo app | | npm run build | Type-check and build the library (ES + CJS) | | npm run typecheck | Run tsc --noEmit | | npm run preview | Preview the production build |

Project layout

src/
├── lib/
│   ├── index.ts            # public exports
│   └── components/
│       └── MuiAudioKnob.tsx        # Knob component + MuiAudioKnobProps
└── dev/
    ├── main.tsx            # demo entry point
    └── DevApp.tsx          # demo playground

The library is built in library mode via Vite (src/lib/index.ts), producing dist/mui-audio-ui.{js,cjs} plus a rolled-up index.d.ts. MUI, Emotion, and React are treated as externals.

License

MIT © Gregory Buchenberger