Sivir UI
Studio 64

Reorder List

The gap the neighboring rows open is the drop target.

Drag to reorder. With the keyboard, Space or Enter grabs the row, the arrow keys move it, Space or Enter drops it, and Escape restores the original order.

Drag a row, or focus it and press Space to grab it. Arrow keys move; Escape cancels.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add reorder-list

Usage

Bind the controlled array for live movement. Use onCommit for persistence so a drag writes once rather than on every crossing. Drag anywhere on a row with a mouse, pen, or touch. Hover highlights the row; a grabbed row keeps its raised surface and primary border until dropped.

<ReorderList bind:items getId={(item) => item.id} getLabel={(item) => item.name} label="Pipeline steps">
  {#snippet children(item)}
    <span>{item.name}</span>
  {/snippet}
</ReorderList>

Anatomy

ReorderList - Reorders controlled items with pointer or keyboard input.