Eurorack

eurorackControls

Hardware panels, metal sockets and captions that swap in place.

$ pnpm dlx shadcn@latest add @pluginui/core-eurorack
Loading interactive preview…

Install

Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.

Pulls in

knobknob-headless
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-eurorack.json

Usage

Connect the documented props to your application or host.

example.tsx
<EurorackPanel widthHp={10} pixelsPerMm={4} label="My instrument" data-panel-theme="mutable">
  <EurorackPanelItem x={25} y={30}>
    <Knob label="Frequency" defaultValue={0.5} size={68} hideLabel hideValue
      renderDesign={state => <MutableKnobDesign {...state} caption={{
        label: "Frequency", offsetMm: 13, widthMm: 22
      }} />} />
  </EurorackPanelItem>
</EurorackPanel>
About Eurorack

Compose the shared Knob with MutableKnobDesign for ribbed caps and the existing headless label/value swap. Captions use one type style and physical panel coordinates; hover or edit replaces the label without adding a window or moving the dial. Round SVG sockets include knurled rims, stepped metal bevels and recessed bores. Rack hosts supply connection state and gestures; this visual demo makes no audio.

Props

PropTypeDefaultDescription
data-panel-theme"mutable"—Shared light material, hardware buttons and physical socket sizing.
captionMutableKnobCaptionSpec—Label, physical offset/width and optional color zone. Existing headless hover/edit state controls the swap.
mountingHolesreadonly {x:number;y:number}[]—Source-panel centers in millimetres, with stable varied screw slots.

Interaction

  • One caption Hover or edit a knob to replace its label with the formatted value. Leaving or finishing an outside gesture restores the label.
All controlsStart building