Physics List
Headless sortable list with velocity-aware drag inertia, proximity collision displacement, stack compression, semantic motion presets, and full keyboard reordering.
Default
Weighted preset with proximity collision and keyboard sort (↑↓, Space, Escape).
Today's focus
1/6 completed · ↑↓ focus · Space to reorder
Sign in to view this example's source code.
Sign inStack mode
Inertial preset with compressed stack separation and depth scaling.
Today's focus
1/6 completed · ↑↓ focus · Space to reorder
Sign in to view this example's source code.
Sign inMagnetic collision
Stronger neighbor push field for magnetic-style displacement.
Today's focus
1/6 completed · ↑↓ focus · Space to reorder
Sign in to view this example's source code.
Sign inProps
| Name | Type | Default | Description |
|---|---|---|---|
| items / onReorder | T[] / (items: T[]) => void | Required | Controlled list data and reorder callback |
| getItemId | (item: T) => string | Required | Stable key extractor for each row |
| renderItem | (item, state) => ReactNode | Required | Row renderer; state includes index, dragging, keyboardGrabbed |
| dragHandle | ReactNode | undefined (built-in grip) | Custom grip element; use showDragHandle={false} to hide |
| preset | PhysicsMotionPreset | "weighted" | soft | weighted | responsive | elastic | inertial motion tokens |
| collision | "proximity" | "magnetic" | "none" | "proximity" | Neighbor displacement field during drag |
| stack | boolean | false | Compressed card-stack layout with depth scaling |
| classNames | { list?: string; item?: string } | undefined | Optional class names for the list and row shells |
| disabled | boolean | false | Disables drag and keyboard pickup |