Interface assemblies

Examples are complete visual assemblies. Signal combines rank faders, mixed-size knobs, switches, an LCD, an editable filter, an envelope and modulation window. Rainbow and Pressure show effect interfaces and linked readouts.

Install an example

Set up the @pluginui namespace once, then install:

npx shadcn@latest add @pluginui/example-signal-synth

The same block source powers the example page, theme gallery and playground. The registry installs that source and resolves the controls it uses. Layout is editable; the components retain their shared gestures and accessibility.

Shared state across different controls

A parameter can have several views. Signal's cutoff knob, filter handle and LCD share one local value. Its envelope knobs and envelope editor share one ADSR state. Follow that pattern when binding the interface to your host's state.

Build from a visual reference

Give your agent the image, the plugin idea and the controls that should work. Ask it to preserve the panel's proportions, spacing, control silhouettes and material details, while choosing original names and branding.

Identify the panel bounds and section layout before polishing individual shadows. Keep wide interfaces readable and portrait interfaces at their intended aspect ratio.
Browse controls for distinctive artwork and components for shared behavior. Install the specific controls you need. Reuse sample and envelope editors instead of rebuilding their gestures. Use Knob/Fader with renderDesign for custom visuals; the shared control retains formatting, keyboard input, reset and edit gestures. Use headless primitives when you need to compose interaction structure itself.
Keep lighting stationary while pointers and thumbs move. Use scoped CSS and section variables for a coherent palette. Check minimum, maximum and disabled states, and preserve readable keyboard feedback without covering the artwork.
Connect controls and readouts to shared local values. Keep unrelated banks independent. Presets should restore the visible configuration; one Undo should reverse a complete drag. Use illustrative graphs when there is no audio host.
Compare the rendered interface with the image and test pointer dragging as well as keyboard input. Verify the copied import and props after installing dependencies, including companion CSS, in your project's configured aliases.

The result should be a named React component you can inspect and remix, with the exact install command and a minimal mounting example. Your application can then connect its values and callbacks to its own state or audio host.

Visual examples and audio products

These examples are silent and keep their edits locally. An assembly does not create an audio engine or access MIDI devices. When building a Maru module, connect its face to the module's declared parameters and host capabilities. See Maru integration.

Behavior, artwork and host binding

Examples use ordinary value controls with independently exported artwork. For example, IndexedKnobDesign draws a cap, while Knob owns the value and gestures. Named controls such as IndexedKnob are convenience visual presets of that same Knob. Appearance families group artwork and scoped CSS; they do not own the complete example or its parameter state. Core, gallery and example collections are installation/discovery categories over the same local source.

A 0–1 value is valid when its meaning is explicit. Use percent() for normalized percentages, or a format function built from the shared value helpers for an intentional unit conversion. Keep visible readouts and accessible text aligned. When building a real Maru module, use the parameter binding adapter to derive ranges, units, defaults and taper from its existing schema.

Visualizers receive their documented data, independently of those controls. Spectrogram accepts a live analyser/frequency callback, static PCM, or prepared spectral frames. The host owns devices and module resources; prepared mode lets an isolated module interface render host analysis without receiving PCM.