ns-ui
Multi-select a source list, drag just one selected item into the destination to prime the siphon, and the rest of the selection flows through a live SVG tube one bead at a time until it drains or you break the seal.
Use when moving many items between two lists at once, where the bulk move should be inspectable and interruptible rather than an opaque 'Move 14 items' button, since priming the siphon with a single drag flows the rest through a visible tube one at a time; pick checkbox-domino-run instead when the bulk action happens in place inside one list, or reorder-drag-wake when the items stay in one list and only their order changes.
Install
npx shadcn add https://design.helpmarq.comns-ui / transfer-list-siphon — select many, drag one, the rest flow through the tube
Select engineers on the left, then drag any one of them into the squad. The rest of your selection siphons across on its own — watch the tube, or stop it mid-flow.
3 selected
1 here
Drag a selected item across, or use the command.
Space toggles a focused row, arrow keys move between rows. The "Move selected" command starts the exact same primed flow as a drag, so nothing here requires a pointer.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | SiphonItem[] | — | the full pool of items; anything not in defaultDestinationIds starts in the source list |
| defaultDestinationIds? | string[] | — | ids from `items` that start already in the destination list |
| defaultSelectedIds? | string[] | — | ids from `items` that start pre-selected in the source list |
| sourceLabel? | string | — | — |
| destinationLabel? | string | — | — |
| onTransfer? | (ids: string[]) => void | — | fires once, when a flow drains successfully, with the ids that made it across in order |
| className? | string | — | — |