A step grid: press a step, or drag across several, to draw a pattern.
Base UI
"use client";
import { createSource } from "@audio-ui/react";Import the registry component for the ready-made look, or compose the primitive's parts yourself.
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>;import { Sequencer } from "@/components/audio/elements/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.
Gestures · 7
Ctrl or Cmd, Home and End go to the corners.The steps share one tab stop, and each is a toggle button (aria-pressed) named after its row and step.
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.
Props · 10
eventDetails.cancel() keeps the pattern as it was.eventDetails.cancel() keeps the velocities as they were.data-current.Data attributes · 2
data-disableddata-paintingRenders children once per row: the place to put a Sequencer.Row. Renders no element of its own.
Props · 1
Renders children once per step of the row it is in: the place to put a Sequencer.Cell. Renders no element of its own.
Props · 1
One sound's row of steps. Name it with aria-label, such as "Kick". Renders a <div> element.
Props · 1
Data attributes · 2
data-disableddata-paintingOne 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.
Props · 1
Data attributes · 3
data-disableddata-onaria-pressed.data-paintingHow 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.
Props · 2
Data attributes · 2
data-disableddata-onSequencer takes the Root props, plus:
Props · 3