Sortable List

Overview

A compound component powered by @dnd-kit/core and @dnd-kit/sortable. Items are rendered via a render prop. Keyboard and pointer sensors are supported. A drag handle sub-component is provided for explicit drag zones.

Usage

import { SortableList } from "@leanicon/web-builder-library";

const [items, setItems] = React.useState([
  { id: "1", label: "First" },
  { id: "2", label: "Second" },
  { id: "3", label: "Third" },
]);

<SortableList items={items} onReorder={setItems}>
  {(item) => (
    <SortableList.Item id={item.id}>
      <SortableList.DragHandle />
      <span>{item.label as string}</span>
    </SortableList.Item>
  )}
</SortableList>;

Variants

With drag handle

Without drag handle (full row drag)

Disabled

Notes

• SortableList.DragHandle hides itself automatically when disabled is true.
• A DragOverlay renders a shadow copy of the active item during drag.
• When onReorder is omitted, the list manages its own order internally.
• Dark mode is handled via semantic tokens.