KQ-640 · WATCH/DRAG

Watch Drag

A watchlist you rank by hand. Pressing a row's grip lifts it on flick and then tracks the pointer 1:1 with no easing, while the rows it passes make room with FLIP on glide, a dashed slot marks the place it will take, and the drop settles it there on glide before a cobalt wash leaves on the exit ease. Space lifts, Up and Down move, Home and End reach the ends, Space drops and Escape restores — every step announced by name and position.

KQ-640 · WATCH/DRAG

Coldbrook Bank · watchlistDrag to rank

BSNBasin$43.60up 2.4 percent
FRNFernwork$18.05down 1.2 percent
CBKColdbrook$126.40up 0.8 percent
GGEGauge$9.72down 4.6 percent
WAYWaylight$61.15up 1.1 percent
FLDFieldline$27.30unchanged, 0.0 percent

Order BSN · FRN · CBK · GGE · WAY · FLD — moves 0

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/watch-drag

Props

holdings: WatchHolding[]; default —; The watchlist: id, symbol, name, price and the day's move in percent.
order / defaultOrder: string[]; default the holdings order; Controlled or initial order as ids; unknown ids are ignored and missing ones appended.
onOrderChange: (order: string[]) => void; default —; Fires from the drop, or from each key that committed a move, never from inside a state updater.
format: (value: number) => string; default USD, 2dp; Formats every price.
label: React.ReactNode; default —; Visible heading; omit it and pass aria-label.

Prop	Type	Default	Description
holdings	WatchHolding[]	—	The watchlist: id, symbol, name, price and the day's move in percent.
order / defaultOrder	string[]	the holdings order	Controlled or initial order as ids; unknown ids are ignored and missing ones appended.
onOrderChange	(order: string[]) => void	—	Fires from the drop, or from each key that committed a move, never from inside a state updater.
format	(value: number) => string	USD, 2dp	Formats every price.
label	React.ReactNode	—	Visible heading; omit it and pass aria-label.