Piano Roll
- from @pluginui
The pitch × beat note grid a melodic module needs: time left to right in beats, pitch bottom to top like a keyboard, every note a block drawn at its own beat and pitch, and the whole loop rendered at once — no virtualization, the deliberate choice for a short loop shown whole. A two-tone grid keeps bars, beats and sixteenths countable while it plays; row stripes read the octaves; the keyboard gutter names the naturals. The playhead is a prop the host drives from its own clock, and when it is null the cursor and its bar.beat.sixteenth readout are simply not drawn — a stopped transport shows no line pinned at zero. Notes are selectable and lit with the accent; an experimental edit mode lets a selected note move or stretch with optional snapping, behind a flag until a sequencer consumes it. Every colour is a --uikit-* token, so an embedded roll follows a host that repaints per mode with no prop passing.
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 initpnpm dlx shadcn@latest add @pluginui/core-piano-rollLive 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.