Physics List
Headless sortable list with velocity-aware drag inertia, proximity collision displacement, stack compression, semantic motion presets, and full keyboard reordering.
Today's focus
Weighted preset with proximity collision and keyboard reorder (↑↓ focus · Space to pick up).
Sign in to view this example's source code.
Sign inStack compression
Collision off so only stack depth is visible. Drag a card - items below fan out and scale down.
At rest the list is flush (gap 0). While dragging, cards below the active item compress with depth scaling - like peeling a deck. Try dragging the top task first.
Sign in to view this example's source code.
Sign inCollision modes
Same weighted preset - only the neighbor field changes. Drag slowly past nearby cards.
Wider, firmer field - neighbors react earlier and push further.
Sign in to view this example's source code.
Sign inMotion presets
Each preset tunes springs, tilt, lift, and release behaviour - drag and release to feel the difference.
Weighted - Balanced default - slightly heavy springs, subtle lift.Subtle tiltNo release momentumTight reorder
Sign in to view this example's source code.
Sign inClean reorder
Neighbors stay put during drag - no proximity displacement.
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 |