Sortable

A drag-and-drop sortable list for reordering items

Usage

Use Sortable to create a reorderable list where users can drag items into a new position using a handle.

import { Sortable } from "@elemnts-ui/react"

<Sortable gap="12">
	<Sortable.Item index={1} id="1">
		<Sortable.ItemHandle>
			...
		</Sortable.ItemHandle>
	</Sortable.Item>
	<Sortable.Item index={2} id="2">
		<Sortable.ItemHandle>
			...
		</Sortable.ItemHandle>
	</Sortable.Item>
</Sortable>

Examples

With Handle Icon

Enhance the drag handle with a grip icon for better visual affordance.

Horizontal

Arrange sortable items in a horizontal row using style props.