Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA transfer list where the order of the chosen items matters, reordered by drag, by four order buttons or with Alt and the arrow keys.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for priorities, export column order, a playlist or any chosen set with a meaningful sequence.
Do not use it when order is irrelevant (use transfer-list).
It uses button, transfer-list, which the CLI installs for you.
It needs @dnd-kit/react.
import { PickList } from "@/components/ui/pick-list"<PickList
aria-label="Export columns"
items={columns}
value={order}
onValueChange={setOrder}
titles={["Columns", "Export order"]}
/>| Prop | Type | Default | Description |
|---|---|---|---|
items | TransferItem[] | - | All the items. |
value / defaultValue / onValueChange | string[] | [] | Chosen ids in order. |
titles / searchable / emptyTexts | - | - | As in transfer-list. |
transfer-list (Space, Shift+Arrow, Ctrl+A, typeahead).Motion respects prefers-reduced-motion: the only animation is the loading spinner, which is switched off. Layout uses logical properties, so the component works in right-to-left languages.
reorderSelection(order, picked, "up" | "down" | "top" | "bottom") is exported: it moves a set of ids as a block and keeps their relative order.
The component ships with a Testing Library test (pick-list.test.tsx) that covers its keyboard paths, roles and states.