Sortable

Drag-and-drop sorting. Free, MIT · Data and metrics › Lists and trees

Installation

npx valyro-cli@latest add sortable

npx shadcn@latest add https://valyro.xyz/r/sortable.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Sortable } from 'valyro-ui';

Prop	Type	Default
`items`	`readonly T[]`		Controlled items, in order.
`defaultItems`	`readonly T[]`		Initial `items` when uncontrolled.
`onReorder`	`(items: T[], move: SortableMove<T>) => void`		Called after a drop that changed the order (pointer or keyboard).
`getKey`	`(item: T) => SortableKey`		Stable key of an item. Defaults to `item.id`, or the item itself for strings and numbers.
`children` *	`(item: T, state: SortableItemState) => ReactNode`		Renders one item; also renders the copy that follows the pointer (`state.isOverlay`).
`layout`	`'vertical' \| 'horizontal' \| 'grid'`	`'vertical'`	`grid` matches drop positions in both directions and moves rows with ArrowUp / ArrowDown.
`handle`	`boolean`	`false`	Only a `SortableHandle` inside the item starts a drag; the rest of the item stays interactive.
`disabled`	`boolean`	`false`	Turn off reordering: no item can be picked up by pointer or keyboard, and handles are disabled.
`isItemDisabled`	`(item: T) => boolean`		Items that can't be picked up (others can still move past them).
`getItemLabel`	`(item: T) => string`		Item name for announcements and handle labels. Defaults to "item 3".
`labels`	`Partial<SortableLabels>`		Overrides for the built-in English text; keys left out keep their defaults.