Private beta

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.

Palette
Finish
Loading interactive preview…

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-pad

One-time setup in components.json

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

Loading interactive preview…

MIDI Playback

midi-playback

One timeline for host playback, tracks and MIDI export.

Viewshadcn add @maruaudio-ui/midi-playback
Loading interactive preview…

Audio Clip Player

audio-clip-player

Play, pause and seek a clip through its waveform.

Viewshadcn add @maruaudio-ui/audio-clip-player
Loading interactive preview…

Knob

knob

Dial, ring or text controls: shared gestures, caption reveal, fitting and CC wiring.

Viewshadcn add @maruaudio-ui/knob
Loading interactive preview…

Fader

fader

Channel-strip slider, vertical or horizontal.

Viewshadcn add @maruaudio-ui/fader
Loading interactive preview…

Dual Band Selector

dual-band-selector

The Logic-style Low Cut / High Cut band bar.

Viewshadcn add @maruaudio-ui/dual-band-selector
Loading interactive preview…

XY Pad

xy-pad

Two-dimensional drag surface with a trailing glow.

Viewshadcn add @maruaudio-ui/xy-pad
Loading interactive preview…

Plan Pad

plan-pad

N labelled points on a scaled top-down plan.

Viewshadcn add @maruaudio-ui/plan-pad
Loading interactive preview…

Triangle Pad

triangle-pad

Two normalized controls, three post-computed corner weights.

Viewshadcn add @maruaudio-ui/triangle-pad
Loading interactive preview…

Toggle Switch

toggle-switch

Rocker, stomp or hardware lever with a satisfying pressed state.

Viewshadcn add @maruaudio-ui/toggle-switch
Loading interactive preview…

Glow Button

glow-button

Lit performance and console buttons whose glow can follow the music.

Viewshadcn add @maruaudio-ui/glow-button
Loading interactive preview…

CC Knob Strip

cc-knob-strip

Draggable MIDI CC chips you can turn and reorder.

Viewshadcn add @maruaudio-ui/cc-knob-strip
Loading interactive preview…

Tag Browser

tag-browser

Pick keywords by category, preset-browser style.

Viewshadcn add @maruaudio-ui/tag-browser
Loading interactive preview…

Preset Selector

preset-selector

The compact preset dropdown every face header carries.

Viewshadcn add @maruaudio-ui/preset-selector
Loading interactive preview…

Preset Browser

preset-browser

Browse, filter, tag and save a whole preset library inside the face.

Viewshadcn add @maruaudio-ui/preset-browser
Loading interactive preview…

Envelope Overlay

envelope-overlay

Draw and edit AHDSR over the take it shapes.

Viewshadcn add @maruaudio-ui/envelope-overlay
Loading interactive preview…

Take Switcher

take-switcher

Tiles for generated takes, with pin and regenerate.

Viewshadcn add @maruaudio-ui/take-switcher
Loading interactive preview…

Envelope Editor

envelope-editor

The envelope shape and its four knobs, kept in sync.

Viewshadcn add @maruaudio-ui/envelope-editor
Loading interactive preview…

EQ Editor

eq-editor

Hands on the curve: N draggable bands, two readings.

Viewshadcn add @maruaudio-ui/eq-editor
Loading interactive preview…

Vocoder Panel

vocoder-panel

Live filter-bank levels and compact vocoder controls.

Viewshadcn add @maruaudio-ui/vocoder-panel
Loading interactive preview…

Step Grid

step-grid

The sequencer grid: tap, paint, ride the velocity.

Viewshadcn add @maruaudio-ui/step-grid
Loading interactive preview…

Rhythm Wheel

rhythm-wheel

A bar as a circle, and the shape the pattern makes.

Viewshadcn add @maruaudio-ui/rhythm-wheel
Loading interactive preview…

Transport Controls

transport-controls

Play, stop, loop, a tempo you can drag, and a division that means something.

Viewshadcn add @maruaudio-ui/transport-controls
Loading interactive preview…

Piano Keyboard

piano-keyboard

The playable surface: press, glissando, type.

Viewshadcn add @maruaudio-ui/piano-keyboard
Loading interactive preview…

Waveform Selector

waveform-selector

A visual waveform picker in a compact popover.

Viewshadcn add @maruaudio-ui/waveform-selector
Loading interactive preview…

Number Field

number-field

A compact numeric input that commits once per gesture.

Viewshadcn add @maruaudio-ui/number-field
Loading interactive preview…

Note Range Selector

note-range-selector

A compact keyboard for choosing a span of notes.

Viewshadcn add @maruaudio-ui/note-range-selector
Loading interactive preview…

Segmented Control

segmented-control

One pressed option out of a few, never none.

Viewshadcn add @maruaudio-ui/segmented-control
Loading interactive preview…

Sampler Keyboard

sampler-keyboard

The piano keyboard that shows what a sampler instrument maps.

Viewshadcn add @maruaudio-ui/sampler-keyboard
Loading interactive preview…

Pad Grid

pad-grid

A drum machine's bank of velocity pads.

Viewshadcn add @maruaudio-ui/pad-grid

Viewers

Loading interactive preview…

Sample View

sample-view

A take's waveform and spectrogram on one seconds axis.

Viewshadcn add @maruaudio-ui/sample-view
Loading interactive preview…

Envelope Display

envelope-display

An ADSR envelope you can draw on.

Viewshadcn add @maruaudio-ui/envelope-display
Loading interactive preview…

Level Meter

level-meter

Volume bars with peak hold.

Viewshadcn add @maruaudio-ui/level-meter
Loading interactive preview…

Gain Reduction Meter

gain-reduction-meter

Compressor metering: IN and OUT bars, GR hanging from the top.

Viewshadcn add @maruaudio-ui/gain-reduction-meter
Loading interactive preview…

EQ Display

eq-display

Filter response curve, computed rather than measured.

Viewshadcn add @maruaudio-ui/eq-display
Loading interactive preview…

Dynamics Display

dynamics-display

Transfer curve for a compressor or a gate, plus its GR meter.

Viewshadcn add @maruaudio-ui/dynamics-display
Loading interactive preview…

Transfer Curve

transfer-curve

What a waveshaper does to a sample, drawn.

Viewshadcn add @maruaudio-ui/transfer-curve
Loading interactive preview…

Delay Tap Display

delay-tap-display

A delay's echo train, drawn on a time axis.

Viewshadcn add @maruaudio-ui/delay-tap-display
Loading interactive preview…

Segment Display

segment-display

The LED readout off the front of a rack unit.

Viewshadcn add @maruaudio-ui/segment-display
Loading interactive preview…

Dot Matrix Display

dot-matrix-display

The character screen bolted into the front of a rack unit.

Viewshadcn add @maruaudio-ui/dot-matrix-display
Loading interactive preview…

Piano Roll

piano-roll

The whole loop as a pitch × beat note grid, rendered at once.

Viewshadcn add @maruaudio-ui/piano-roll
Loading interactive preview…

Drum Lane

drum-lane

Named lanes and hits drawn where they land, so swing is visible.

Viewshadcn add @maruaudio-ui/drum-lane
Loading interactive preview…

Beat Grid Scope

beat-grid-scope

Bars across, dB downward, and a slot where you draw the signal.

Viewshadcn add @maruaudio-ui/beat-grid-scope
Loading interactive preview…

Status Chip

status-chip

Five states a face can tell apart, including the two that matter.

Viewshadcn add @maruaudio-ui/status-chip
Loading interactive preview…

Value Readout

value-readout

A big honest number: tabular, unitted, and a dash when there is nothing.

Viewshadcn add @maruaudio-ui/value-readout
Loading interactive preview…

Stereo Field

stereo-field

Where the sound sits between the speakers, and whether it survives a mono sum.

Viewshadcn add @maruaudio-ui/stereo-field
Loading interactive preview…

Diagnostic Panel

diagnostic-panel

What the host told the plugin, what reached it, and what it produced — in eleven tabs.

Viewshadcn add @maruaudio-ui/diagnostic-panel
Loading interactive preview…

Diagnostic Overlay

diagnostic-overlay

Right-click a module face to open its diagnostics, and only where that is allowed.

Viewshadcn add @maruaudio-ui/diagnostic-overlay

Visualizers

Loading interactive preview…

Oscilloscope

oscilloscope

Time-domain waveform trace.

Viewshadcn add @maruaudio-ui/oscilloscope
Loading interactive preview…

Lissajous Scope

lissajous-scope

A vectorscope figure from a single mono signal.

Viewshadcn add @maruaudio-ui/lissajous-scope
Loading interactive preview…

Goniometer

goniometer

The stereo image as a shape — mono straight up, phase problems flat.

Viewshadcn add @maruaudio-ui/goniometer
Loading interactive preview…

Spectrogram

spectrogram

Frequency over time, live or prepared for a timeline.

Viewshadcn add @maruaudio-ui/spectrogram
Loading interactive preview…

Chladni Plate

chladni-plate

The nodal figure sand draws on a driven plate.

Viewshadcn add @maruaudio-ui/chladni-plate
Loading interactive preview…

LFO Visualizer

lfo-visualizer

An LFO's waveform, with a cursor on the live phase.

Viewshadcn add @maruaudio-ui/lfo-visualizer
Loading interactive preview…

Circle of Fifths

circle-of-fifths

A pitch-class histogram on the wheel, with a tonal-centre needle.

Viewshadcn add @maruaudio-ui/circle-of-fifths
Loading interactive preview…

Pitch Class Clock

pitch-class-clock

Chords as shapes on a twelve-note dial.

Viewshadcn add @maruaudio-ui/pitch-class-clock
Loading interactive preview…

Pitch Class Histogram

pc-histogram

Twelve bars: how much each pitch class sounded.

Viewshadcn add @maruaudio-ui/pc-histogram
Loading interactive preview…

Chord Graph

chord-graph

How the chords in a progression connect, by shared notes.

Viewshadcn add @maruaudio-ui/chord-graph
Loading interactive preview…

Interval Vector Chart

interval-vector-chart

The harmonic fingerprint of a chord, in six bars.

Viewshadcn add @maruaudio-ui/interval-vector-chart
Loading interactive preview…

Consonance Matrix

consonance-matrix

Which of the twelve notes fit what you are playing.

Viewshadcn add @maruaudio-ui/consonance-matrix
Loading interactive preview…

Chord Readout

chord-readout

Everything analysis can say about what is sounding.

Viewshadcn add @maruaudio-ui/chord-readout
Loading interactive preview…

Spectrum

spectrum

FFT magnitude, as bars or a filled curve.

Viewshadcn add @maruaudio-ui/spectrum

Foundations

Loading interactive preview…

Beat Grid Geometry

beat-grid-geometry

The bars-across, dB-down plot as pure maths — sharing the piano roll's x axis.

Viewshadcn add @maruaudio-ui/beat-grid-geometry
Loading interactive preview…

useBeatClock

beat-clock

Where the playhead is, and whose clock said so.

Viewshadcn add @maruaudio-ui/beat-clock
Loading interactive preview…

Control Label

control-label

Readable captions that fit the space their control provides.

Viewshadcn add @maruaudio-ui/control-label

Theming

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.

panel.tsx
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.