Maru UI Kit
The controls a plugin interface is actually made of: knobs, faders, XY pads, footswitches, assignable CC strips. They draw themselves in SVG and inline styles rather than utility classes, so they carry no Tailwind config and no stylesheet of consequence, and the same components render in a web page and inside an exported VST3 without a second implementation.
Nothing here is a dependency you take on. The CLI copies the source into your project and you own it from then on.
Live demo
A whole front panel, composed from the kit
Everything below is interactive and wired to one piece of React state. Drag a knob, hold Shift for a fine pass, double-click to reset it. Drag a CC chip by its grip to reorder the strip. The parameter line along the bottom is the panel's live state, as an engine would receive it.
Install
One CLI command per control
The kit is published as a shadcn registry. Point your components.json at the @maruaudio-ui namespace once, then add controls by name. Each one arrives as source in your own tree, with no package to version and no build step, and every dependency it needs comes along with it.
$ npx shadcn add @maruaudio-ui/knob$ npx shadcn add @maruaudio-ui/fader @maruaudio-ui/xy-padOne-time setup in components.json
{
"registries": {
"@maruaudio-ui": "https://engine.maruaudio.com/r/{name}.json"
}
}Controls
Everything in the registry
Each card is a live instance. Open one for its full source, props, and install command.
Controls
MIDI Playback
midi-playbackOne timeline for host playback, tracks and MIDI export.
shadcn add @maruaudio-ui/midi-playbackAudio Clip Player
audio-clip-playerPlay, pause and seek a clip through its waveform.
shadcn add @maruaudio-ui/audio-clip-playerKnob
knobDial, ring or text controls: shared gestures, caption reveal, fitting and CC wiring.
shadcn add @maruaudio-ui/knobDual Band Selector
dual-band-selectorThe Logic-style Low Cut / High Cut band bar.
shadcn add @maruaudio-ui/dual-band-selectorTriangle Pad
triangle-padTwo normalized controls, three post-computed corner weights.
shadcn add @maruaudio-ui/triangle-padToggle Switch
toggle-switchRocker, stomp or hardware lever with a satisfying pressed state.
shadcn add @maruaudio-ui/toggle-switchGlow Button
glow-buttonLit performance and console buttons whose glow can follow the music.
shadcn add @maruaudio-ui/glow-buttonCC Knob Strip
cc-knob-stripDraggable MIDI CC chips you can turn and reorder.
shadcn add @maruaudio-ui/cc-knob-stripTag Browser
tag-browserPick keywords by category, preset-browser style.
shadcn add @maruaudio-ui/tag-browserPreset Selector
preset-selectorThe compact preset dropdown every face header carries.
shadcn add @maruaudio-ui/preset-selectorPreset Browser
preset-browserBrowse, filter, tag and save a whole preset library inside the face.
shadcn add @maruaudio-ui/preset-browserEnvelope Overlay
envelope-overlayDraw and edit AHDSR over the take it shapes.
shadcn add @maruaudio-ui/envelope-overlayTake Switcher
take-switcherTiles for generated takes, with pin and regenerate.
shadcn add @maruaudio-ui/take-switcherEnvelope Editor
envelope-editorThe envelope shape and its four knobs, kept in sync.
shadcn add @maruaudio-ui/envelope-editorEQ Editor
eq-editorHands on the curve: N draggable bands, two readings.
shadcn add @maruaudio-ui/eq-editorVocoder Panel
vocoder-panelLive filter-bank levels and compact vocoder controls.
shadcn add @maruaudio-ui/vocoder-panelStep Grid
step-gridThe sequencer grid: tap, paint, ride the velocity.
shadcn add @maruaudio-ui/step-gridRhythm Wheel
rhythm-wheelA bar as a circle, and the shape the pattern makes.
shadcn add @maruaudio-ui/rhythm-wheelTransport Controls
transport-controlsPlay, stop, loop, a tempo you can drag, and a division that means something.
shadcn add @maruaudio-ui/transport-controlsPiano Keyboard
piano-keyboardThe playable surface: press, glissando, type.
shadcn add @maruaudio-ui/piano-keyboardWaveform Selector
waveform-selectorA visual waveform picker in a compact popover.
shadcn add @maruaudio-ui/waveform-selectorNumber Field
number-fieldA compact numeric input that commits once per gesture.
shadcn add @maruaudio-ui/number-fieldNote Range Selector
note-range-selectorA compact keyboard for choosing a span of notes.
shadcn add @maruaudio-ui/note-range-selectorSegmented Control
segmented-controlOne pressed option out of a few, never none.
shadcn add @maruaudio-ui/segmented-controlSampler Keyboard
sampler-keyboardThe piano keyboard that shows what a sampler instrument maps.
shadcn add @maruaudio-ui/sampler-keyboardViewers
Sample View
sample-viewA take's waveform and spectrogram on one seconds axis.
shadcn add @maruaudio-ui/sample-viewEnvelope Display
envelope-displayAn ADSR envelope you can draw on.
shadcn add @maruaudio-ui/envelope-displayGain Reduction Meter
gain-reduction-meterCompressor metering: IN and OUT bars, GR hanging from the top.
shadcn add @maruaudio-ui/gain-reduction-meterEQ Display
eq-displayFilter response curve, computed rather than measured.
shadcn add @maruaudio-ui/eq-displayDynamics Display
dynamics-displayTransfer curve for a compressor or a gate, plus its GR meter.
shadcn add @maruaudio-ui/dynamics-displayTransfer Curve
transfer-curveWhat a waveshaper does to a sample, drawn.
shadcn add @maruaudio-ui/transfer-curveDelay Tap Display
delay-tap-displayA delay's echo train, drawn on a time axis.
shadcn add @maruaudio-ui/delay-tap-displaySegment Display
segment-displayThe LED readout off the front of a rack unit.
shadcn add @maruaudio-ui/segment-displayDot Matrix Display
dot-matrix-displayThe character screen bolted into the front of a rack unit.
shadcn add @maruaudio-ui/dot-matrix-displayPiano Roll
piano-rollThe whole loop as a pitch × beat note grid, rendered at once.
shadcn add @maruaudio-ui/piano-rollDrum Lane
drum-laneNamed lanes and hits drawn where they land, so swing is visible.
shadcn add @maruaudio-ui/drum-laneBeat Grid Scope
beat-grid-scopeBars across, dB downward, and a slot where you draw the signal.
shadcn add @maruaudio-ui/beat-grid-scopeStatus Chip
status-chipFive states a face can tell apart, including the two that matter.
shadcn add @maruaudio-ui/status-chipValue Readout
value-readoutA big honest number: tabular, unitted, and a dash when there is nothing.
shadcn add @maruaudio-ui/value-readoutStereo Field
stereo-fieldWhere the sound sits between the speakers, and whether it survives a mono sum.
shadcn add @maruaudio-ui/stereo-fieldDiagnostic Panel
diagnostic-panelWhat the host told the plugin, what reached it, and what it produced — in eleven tabs.
shadcn add @maruaudio-ui/diagnostic-panelDiagnostic Overlay
diagnostic-overlayRight-click a module face to open its diagnostics, and only where that is allowed.
shadcn add @maruaudio-ui/diagnostic-overlayVisualizers
Lissajous Scope
lissajous-scopeA vectorscope figure from a single mono signal.
shadcn add @maruaudio-ui/lissajous-scopeGoniometer
goniometerThe stereo image as a shape — mono straight up, phase problems flat.
shadcn add @maruaudio-ui/goniometerSpectrogram
spectrogramFrequency over time, live or prepared for a timeline.
shadcn add @maruaudio-ui/spectrogramChladni Plate
chladni-plateThe nodal figure sand draws on a driven plate.
shadcn add @maruaudio-ui/chladni-plateLFO Visualizer
lfo-visualizerAn LFO's waveform, with a cursor on the live phase.
shadcn add @maruaudio-ui/lfo-visualizerCircle of Fifths
circle-of-fifthsA pitch-class histogram on the wheel, with a tonal-centre needle.
shadcn add @maruaudio-ui/circle-of-fifthsPitch Class Clock
pitch-class-clockChords as shapes on a twelve-note dial.
shadcn add @maruaudio-ui/pitch-class-clockPitch Class Histogram
pc-histogramTwelve bars: how much each pitch class sounded.
shadcn add @maruaudio-ui/pc-histogramChord Graph
chord-graphHow the chords in a progression connect, by shared notes.
shadcn add @maruaudio-ui/chord-graphInterval Vector Chart
interval-vector-chartThe harmonic fingerprint of a chord, in six bars.
shadcn add @maruaudio-ui/interval-vector-chartConsonance Matrix
consonance-matrixWhich of the twelve notes fit what you are playing.
shadcn add @maruaudio-ui/consonance-matrixChord Readout
chord-readoutEverything analysis can say about what is sounding.
shadcn add @maruaudio-ui/chord-readoutFoundations
Beat Grid Geometry
beat-grid-geometryThe bars-across, dB-down plot as pure maths — sharing the piano roll's x axis.
shadcn add @maruaudio-ui/beat-grid-geometryuseBeatClock
beat-clockWhere the playhead is, and whose clock said so.
shadcn add @maruaudio-ui/beat-clockControl Label
control-labelReadable captions that fit the space their control provides.
shadcn add @maruaudio-ui/control-labelTheming
Palette and finish are independent
Palette values cascade through CSS custom properties. Shape and material come from one panel-wide skin provider. Keeping those axes separate lets the same flat finish work with Bone, Midnight, Ember, or any palette you define.
Use the live Palette and Finish controls above to compare the combinations without navigating away or resetting the demo.
import { PRESET_THEMES, themeStyle } from "@maruaudio/ui-kit"
<ControlSkinProvider skin="flat">
<div
style={themeStyle({ ...PRESET_THEMES.ember, radius: "3px" })}
>
<Knob label="Cutoff" min={20} max={20000} defaultValue={2200} />
<Fader label="Out" min={-60} max={6} defaultValue={0} />
</div>
</ControlSkinProvider>Give your sound a face
Your controls are where a player meets the sound. Pair them with your instruments, effects, and presets to make a product that feels like yours.