Sortable

The kit's one reordering primitive: lists, grids, tables and multi-list boards with pointer, touch and keyboard dragging, spoken announcements and a Move menu on every item so nothing requires dragging. Also ships usePointerDrag and useTimeScale, the drag and time-axis hooks behind the scheduler and Gantt.

Installation

Usage

import { SortableList } from "@vamos-ui/react/sortable";

<SortableList
  aria-label="Main menu"
  items={pages}
  getLabel={(p) => p.title}
  onReorder={setPages}
  renderItem={(p) => p.title}
/>

// compose your own markup
<Sortable items={lines} onReorder={setLines}>
  {lines.map((l) => (
    <SortableItem key={l.id} id={l.id} as="tr"><td><SortableHandle /></td>…<td><SortableMoveMenu /></td></SortableItem>
  ))}
  <SortableOverlay>{(id) => <Row id={id} />}</SortableOverlay>
</Sortable>

Keyboard: focus a handle, Space or Enter lifts, arrow keys move, Space or Enter drops, Escape cancels. Instructions are attached to every handle via aria-describedby.

Announcements come from the sortable dictionary namespace, e.g. "Picked up About us. Position 2 of 6." (tr: "Hakkımızda alındı. Konum 2 / 6.").

Repeated items never blur. The overlay is an opaque popover without backdrop-filter, so it renders the same in glass and solid. Reduced motion turns off the item-shift and drop animations.

Touch: long press (220 ms) lifts, so the list still scrolls. The Move menu is the dependable path on touch screens.

Tree reordering: projectTreeMove, flattenTree and moveTreeNode (core) are ready; the SortableTree component is documented under Sortable list / tree (/docs/components/sortable-list).

Examples

API