KQ-721 · WATCHLIST/ROW

Watchlist Row

One row of a watchlist whose star is a switch: watching scales the fill up from the star's centre on recoil, two visible bounces of a stamp landing, while the price rolls to each print on snap and the change chip re-tones. Unstarring drains the fill, holds a beat so the empty star is read, then slides the content out on the exit ease and collapses the row's measured height behind it, firing onRemoved from the collapse's completion. Tab reaches the star, Space and Enter toggle it.

KQ-721 · WATCHLIST/ROW

Basin BSN, $24.18, up 2.41 percent
Fernwork FRN, $8.42, down 1.06 percent
Coldbrook CBK, $12.90, up 1.18 percent

3 watched · last tick none · none removed

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/watchlist-row

Props

id: string; default —; Identifies the row in onRemoved.
symbol: string; default —; The ticker printed first and named in the star's label.
name: string; default —; The asset's name, printed under the symbol.
price: number; default —; The last print. Changing it rolls the digits on snap.
previousClose: number; default —; Basis for the change chip.
watched / defaultWatched: boolean; default true; Controlled or initial star state; false starts the leave after the beat.
onWatchedChange: (watched: boolean) => void; default —; Fires from the press that toggled the star.
onRemoved: (id: string) => void; default —; Fires once the row has slid out and collapsed; drop it from the list here.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Prints the price. The default pins an explicit locale so server and client agree.
leaveDelayMs: number; default 500; The beat between unstarring and the slide-out, so the empty star is read; re-starring inside it cancels the leave.

Prop	Type	Default	Description
id	string	—	Identifies the row in onRemoved.
symbol	string	—	The ticker printed first and named in the star's label.
name	string	—	The asset's name, printed under the symbol.
price	number	—	The last print. Changing it rolls the digits on snap.
previousClose	number	—	Basis for the change chip.
watched / defaultWatched	boolean	true	Controlled or initial star state; false starts the leave after the beat.
onWatchedChange	(watched: boolean) => void	—	Fires from the press that toggled the star.
onRemoved	(id: string) => void	—	Fires once the row has slid out and collapsed; drop it from the list here.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Prints the price. The default pins an explicit locale so server and client agree.
leaveDelayMs	number	500	The beat between unstarring and the slide-out, so the empty star is read; re-starring inside it cancels the leave.