Sequencer

Installation

bunnpmpnpmyarn
Copy
pnpm dlx shadcn@latest add @audio-ui/sequencer

Anatomy

Import the registry component for the ready-made look, or compose the primitive's parts yourself.

Copy
import { Sequencer } from "@audio-ui/react";

<Sequencer.Root>
  <Sequencer.Rows>
    {(row) => (
      <Sequencer.Row index={row}>
        <Sequencer.Cells>
          {(step) => <Sequencer.Cell step={step} />}
        </Sequencer.Cells>
      </Sequencer.Row>
    )}
  </Sequencer.Rows>
</Sequencer.Root>;

Usage

Copy
import { Sequencer } from "@/components/audio-ui/sequencer";

<Sequencer
  aria-label="Drum pattern"
  onValueChange={setPattern}
  rowLabels={["Kick", "Snare", "Hihat"]}
  source={step}
  value={pattern}
/>;

value is a row per sound, each a list of steps: boolean[][]. velocities is how loud each step plays, from 0 to 1, in the same shape; a step it does not list plays at full. Add showVelocity for a bar under each row to draw them. source is the step being played, a live { getSnapshot, subscribe } such as one made with createSource: a clock ticking every step never re-renders React.

Interaction

The steps share one tab stop, and each is a toggle button (aria-pressed) named after its row and step.

API reference

Root

A grid of steps to switch on and off, one row per sound: the pattern of a drum machine. Pressing a cell flips it, and dragging on carries the new state across every cell the pointer crosses. The cells are one tab stop, and the arrow keys move between them. The step being played comes from source and is marked on its cells straight in the DOM with data-current, so a clock ticking every step never re-renders React. Renders a <div> element.

Rows

Renders children once per row: the place to put a Sequencer.Row. Renders no element of its own.

Cells

Renders children once per step of the row it is in: the place to put a Sequencer.Cell. Renders no element of its own.

Row

One sound's row of steps. Name it with aria-label, such as "Kick". Renders a <div> element.

Cell

One step of a row: a toggle button, pressed when the step is on. Press it and drag on to paint the same state across the cells you cross; focused, Space or Enter flips it and the arrow keys move to the next cell. Name it with aria-label, such as "Kick, step 5". The step being played gets data-current. Renders a <button> element.

Velocity

How loud one step plays, as a bar from the bottom of its box: the height is the velocity, through the --sequencer-velocity CSS variable. Pressing it sets the velocity where the pointer is, and dragging on draws across the steps of the row. Alt + click or Delete brings it back to full. A native <input type="range"> inside takes the arrow keys and carries the accessible name. Put one per step of a Sequencer.Row, in a row of its own under the cells. Renders a <div> element.

Registry component

Sequencer takes the Root props, plus: