shadcn.io is not affiliated with official shadcn/ui
DAW Project Music Block for Ark UI
A project window with a ruler of 16 bars over four lanes of drawn clips, Mute and Solo per lane, zoom and loop controls, and clips you move one bar at a time without overlap, with no audio.
Installation
Overview
Arrange a song with this project window for React with Ark UI. It is Loftline's editor, a framed window with no sidebar. The top bar names the project, Night Drive, with its tempo, a position readout and Play, the one Shine Button. A toolbar has a Toggle Group to show 4, 8 or 16 bars, a Switch that loops bars 5 to 12, and Next bar. The arrangement is a ruler of 16 bars over four lanes, Vocals, Drums, Bass and Synth, each with Mute and Solo Toggles that follow the real rule and drawn clips with a small waveform. Choose a clip and the band below names it ("Verse vocal, bars 5 to 12, 8 bars"); the arrow keys or the Earlier and Later Buttons move it one bar, snapped, inside its lane and never over a neighbour, and a status line says what happened. The lanes scroll in a named region. Nothing sounds. For editors, schedulers and any timeline you can rearrange.
FAQ
How do I load my own project?
Edit LANES for the lanes and START for the clips: each has an id, a lane, a from bar (0 is the first), a length in bars and a name; the waveform is drawn from a seed by waveOf. The tempo is BPM. The clip sentence, the readout and the positions are worked out from the clips, so nothing is typed twice. In your app replace the local state with your project and save from moveBy.
How do I move a clip?
Select it, then press the Left or Right arrow key while it has focus, or use Earlier and Later. It moves one bar. It never leaves the 16 bars and never overlaps another clip in its lane: the status line says "Blocked by Ad lib." or "Verse vocal is at the end." and nothing moves. The Up and Down arrows move focus to the nearest clip in the next lane.
What does Play do?
It runs a playhead bar by bar at the project tempo for at most 32 bars, wrapping inside bars 5 to 12 when Loop is on, and stops at the end or when you press Stop. On a narrow screen the lanes follow the playhead. Under reduced motion Play is refused and Next bar moves the playhead one bar at a time.
How do Mute and Solo work?
As on a mixer: a muted lane is silent, and when any lane is soloed only the soloed ones are heard. A lane that is not heard draws its clips with a dashed border and softer text. The status line names the lane and what you did.