Piano Keyboard

from @pluginui

A playable keyboard, one to ten octaves wide: press a key and it strikes with a velocity taken from how far down the key you landed, drag across it and it glissandos — previous note off, entered note on. Notes go out through onNoteOn/onNoteOff and never through a param channel, and what is lit comes back in as a held map shaped like the module contract's activeNotes, so a key that was struck but declined draws as struck-and-silent rather than as nothing at all. Scale membership and a root tint as controlled props, opt-in QWERTY input through lib/computer-keyboard, keys that are real buttons with note-name labels, and a read-only mode for drawing a voicing.

Install

New to shadcn? Set up your project

If your project already has a shadcn components.json, skip initialization. Otherwise, run this once from your project root.

$pnpm dlx shadcn@latest init

Setup by framework · Configure a registry namespace

$pnpm dlx shadcn@latest add @pluginui/core-piano-keyboard

Live preview

No live preview has been built for this component yet.

Registry dependencies0

The CLI adds no other registry items with this one.

Packages0

No npm packages are installed with it.

More from @pluginui, 212 components

All @pluginui

Audio Clip Player component
@pluginui
Host-controlled play/pause, seekable waveform and time display.
Audio Clip Wave Layer component
@pluginui
Audio Clip Wave Layer shared by module faces and application hosts.
Beat Grid Scope component
@pluginui
A dynamics scope's chrome: a bars-across grid with bar lines heavier than beats and an optional sixteenth grid, a dB gutter reading downward from 0, a dashed hard-ceiling line with its own label (dashed because a budget is a limit, not a measurement), a playhead, and beneath the plot a strip of event lanes drawn as onset ticks at their exact beat — so a swung event visibly sits off its gridline — sharing the plot's own xForBeat, with the playhead continuing through them. It draws no signal itself: `children` is a render function handed the resolved layout, so a prediction envelope, a measured overlay and a waveform all live in the SAME coordinate space as the grid and cannot disagree about where a beat is. The playhead is either given as a phase (null draws none, which is the right picture for a stopped transport) or derived from a host transport through useBeatClock, whose source is reported back so the caption can distinguish host-locked from free-running. SVG, no measurement, renders on the server.
Button component
@pluginui
Canonical shadcn and Base UI button used by portable controls and website aliases.
CC Binding Editor component
@pluginui
Portable control-level MIDI CC menu and binding editor: assign a controller number and channel by right-clicking a control, then edit range, response curve, learn, or remove. The existing badge and drag-drop source strip remain optional paths through the same `midi` callbacks.
CC Control Chrome component
@pluginui
One reusable frame for custom controls: parameter-path resolution, drag target, activity state, editable badge, and the shared MIDI context menu.
CC Knob Strip component
@pluginui
A row of MIDI CC chips you can turn and reorder. Turning is the ordinary knob gesture; reordering starts from a separate grip handle and works with pointer or arrow keys.
CC Mapping List component
@pluginui
Every MIDI CC mapping of a host as one grouped list: by module or rack instance, with a by-CC sort, search and filters. Rows show the CC, input and channel, target, range and live activity, with Learn, Pick control, enable and remove; opening a row gives CC, channel and range, and Advanced adds input, value mode, takeover, curve and invert. Import, export, reset and clear are callbacks; the list keeps only view state.
CC Source Strip component
@pluginui
The MIDI CC chips you drag onto a control to bind it: the mod wheel first, then the expressive controllers, then a numeric picker for the other hundred-odd numbers. Each chip is draggable by pointer, assignable from the keyboard, and pulses when its controller sends traffic.
CC Unmapped Notice component
@pluginui
The host's one toast for a hardware controller that moved but is not mapped: the source and channel, a live value, a chip you drag straight onto a control, Pick control (click or arrow keys and Enter) and Ignore. It never takes focus, fades after the control goes quiet, and guides any source-first pick. Every edit goes through the shared CC drag controller, so drops into sandboxed face frames work too.
Chladni Plate component
@pluginui
Nodal patterns for a set of frequencies — the figure sand draws on a driven metal plate. Either a particle simulation finding the nodes over time or the standing wave as a field, on a square or circular plate. Parameter-driven, so it needs no audio source.
Chord Graph component
@pluginui
How the chords in a progression connect, as a shared-pitch-class network: an edge between every pair sharing a note, weighted by how many. A chart tells you the order chords arrive in; this tells you why one slides into the next and another lands like a cut — so you can see which substitutions are available before trying them.

The Signal

Install

Live preview

Registry dependencies0

Packages0

Install

Live preview

Registry dependencies0

Packages0

Source

More from @pluginui212, 212 components

More from @pluginui, 212 components