1 slot open this monthBy the makers of shadcnregistryWe built shadcnregistry. Now we build your product.Book a callCheck availability
1 slot open this monthAI features?We build AI features into your product.Book a callCheck availability
1 slot open this month🚨 Slop police🚨 Slop police: we clean up vibe-coded apps.Report itReport your app
shadcnregistry
shadcnregistry
RegistryHealthInspect
Terms of ServicePrivacy Policy
  1. Registries
  2. pluginui
  3. Piano Roll

Piano Roll

ui

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.

pnpm dlx shadcn@latest add "https://pluginui.com/r/core-piano-roll.json"
Premium blocks for shadcn/uiShadcnblocks.com · AffiliateExplore
  • maruaudio@>=0.0.3 <0.1.0
    @ui/piano-roll.tsx