CC Knob Strip

cc-knob-stripControls

Draggable MIDI CC chips you can turn and reorder.

$ pnpm dlx shadcn@latest add @pluginui/core-cc-knob-strip
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

knobcontrol-themecontrol-formatcontrol-skin
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-cc-knob-strip.json

Usage

Connect the documented props to your application or host.

example.tsx
import { CCKnobStrip } from "@/components/ui/cc-knob-strip"

<CCKnobStrip
  controls={controls}
  onChange={(id, value) => setControls(update(id, value))}
  onReorder={(order) => setControls(sortBy(order))}
/>
About CC Knob Strip

A row of assignable CC controls: each chip is a mini knob with a CC-number badge. Turning is the ordinary knob gesture; reordering starts from a separate grip handle, so a drag is never mistaken for a value change. Pointer and arrow keys both reorder.

Props

PropTypeDefaultDescription
controlsCCControl[]—The chips in display order. Each carries id, cc, label, value and an optional range.
onChange(id, value, control) => void—Fires when a chip's knob moves.
onReorder(order: string[], from: number, to: number) => void—Fires on drop with the full reordered id list.
reorderablebooleantrueTurn off reordering and hide the grips.
knobSizenumber40Knob diameter inside each chip.
knobSkin"default" | "flat" | "vintage" | "minimal" | "neon""default"Visual finish for the chips' knobs, shared with every other control in the kit. A strip forwards a skin rather than inventing a look of its own, so a vintage strip is made of vintage knobs. Omitted, the chips inherit from a surrounding ControlSkinProvider.

Interaction

  • Drag with pointer capture, so the gesture keeps tracking past the edge of the control.
  • Shift while dragging for a fine pass; release it mid-gesture and coarse tracking resumes.
  • Double-click resets to defaultValue.
  • Arrow keys step normally, Shift+arrow steps finely, PageUp/PageDown jump by ten, Home/End go to the extremes.
  • Proper slider and switch roles with live aria-valuetext, so a screen reader announces the formatted value rather than the raw number.
  • The scroll wheel adjusts the value while the pointer is over the control; stepped ranges move at least one declared step per notch by default.
All controlsStart building