Components
Sortable
UI Library:
A drag-and-drop sortable component designed for seamless item organization across customizable columns.
Installation
pnpm dlx shadcn@latest add @toui/sortable
Examples
Grid
Nested
API Reference
The Sortable component is a flexible drag-and-drop component for organizing items in lists. Below is the complete API reference:
Sortable
The root Sortable component includes the following props:
| Prop | Type | Default |
|---|---|---|
value | ||
onValueChange | ||
getItemValue | ||
children | ||
className | ||
onMove | ||
strategy | ||
onDragStart | ||
onDragEnd |
SortableItem
A draggable item in the sortable list.
| Prop | Type | Default |
|---|---|---|
value | ||
asChild | ||
className | ||
children | ||
disabled |
SortableItemHandle
A drag handle for an item.
| Prop | Type | Default |
|---|---|---|
asChild | ||
className | ||
children | ||
cursor |
Credits
- Built with DndKit.