# Sequencer > The custom element of @audio-ui/elements: its attributes, its parts and a live preview. `` is a step grid with one row per sound and `role="group"`. Pressing a cell toggles it, and dragging applies the new state to every cell crossed. The cells share one tab stop and are navigated with the arrow keys. Rows and steps are generated from templates: ## Usage {/* usage:start: written by `bun scripts/element-usage.ts --write` */} The styles read the theme's CSS variables, which [Styling](/docs/elements#styling) sets. **JavaScript** *With CSS* ```html ``` *With Tailwind* ```html ``` **Vue** *With CSS* ```vue ``` *With Tailwind* ```vue ``` **Svelte** *With CSS* ```svelte console.log(event.detail.value)}> ``` *With Tailwind* ```svelte console.log(event.detail.value)}> ``` **React** In React, the same control is the [Sequencer](/docs/react/sequencer) primitive of `@audio-ui/react`, with the same parts as React components and its value as props. {/* usage:end */} **In Web and React** In plain HTML, a row of `