Appearance
Drag and Drop Components
Presentational components for drag and drop, built on @dnd-kit.
DraggableItem
Wrapper for sortable items.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
id | UniqueIdentifier | Yes | Unique item ID |
children | ReactNode | Yes | Item content |
data | Record<string, unknown> | No | Additional drag data |
disabled | boolean | No | Disable dragging |
isOverlay | boolean | No | Render as drag overlay |
DragHandle
Dedicated drag trigger.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
listeners | SyntheticListenerMap | Yes | From useSortable |
attributes | DraggableAttributes | Yes | From useSortable |
disabled | boolean | No | Disable handle |
children | ReactNode | No | Handle content |
DroppableZone
Drop target container.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
id | UniqueIdentifier | Yes | Zone identifier |
isOver | boolean | No | Whether being dragged over |
children | ReactNode | Yes | Zone content |
className | string | No | Container class |
SortableList
Generic sortable list container.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
items | T[] | Yes | Items array |
getItemId | (item: T) => UniqueIdentifier | Yes | ID extractor |
renderItem | (item: T, index: number) => ReactNode | Yes | Item renderer |
direction | 'vertical' | 'horizontal' | No | List direction (default: 'vertical') |
className | string | No | Container class |
EmptyDropZone
Placeholder for empty drop areas.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
message | string | 'Drop items here' | Placeholder text |
isOver | boolean | false | Highlight state |
className | string | - | Container class |