KQ-862 · REACTION/PICKER

Reaction Picker

A quick-reaction bar that comes when you come near. Pointing at the message or focusing the React control raises the bar from eight pixels below on snap, and inside it the drawn marks lift toward the pointer on a measured 56px falloff; picking one sends a ghost of it flying to the reaction row on glide while the chip it lands on flashes. The tally commits at the press, so Arrow keys, Enter and Escape get the same instant truth as the pointer.

KQ-862 · REACTION/PICKER

Point at the message, or press React, and the bar rises.

Rui07:44

The loose crate at gate B has no label and the docket is one weight short. I can hold it until Marta signs.

picker closed · yours none · 4 reactions

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/reaction-picker

Props

sender: string; default —; Who wrote the message the picker sits on.
text: string; default —; The message body.
time: string; default —; Already formatted, printed beside the sender.
options: PickerOption[]; default spark / agree / lift / watching / question; The pickable reactions: id, word and drawn mark.
baseCounts: Record<string, number>; default —; Seeded counts from other people, added to yours in the row.
picked / defaultPicked: string[]; default []; Controlled or initial list of reaction ids you have added.
onPickedChange: (picked: string[]) => void; default —; Fires with the whole next list on every pick or removal.
onPick: (id: string) => void; default —; Fires with the reaction picked, before the ghost has landed.
open / defaultOpen: boolean; default false; Controlled or initial bar visibility; hover and focus drive it when uncontrolled.
onOpenChange: (open: boolean) => void; default —; Fires from hover, focus, Escape and a pick.
label: string; default —; Names the message region for assistive technology.

Prop	Type	Default	Description
sender	string	—	Who wrote the message the picker sits on.
text	string	—	The message body.
time	string	—	Already formatted, printed beside the sender.
options	PickerOption[]	spark / agree / lift / watching / question	The pickable reactions: id, word and drawn mark.
baseCounts	Record<string, number>	—	Seeded counts from other people, added to yours in the row.
picked / defaultPicked	string[]	[]	Controlled or initial list of reaction ids you have added.
onPickedChange	(picked: string[]) => void	—	Fires with the whole next list on every pick or removal.
onPick	(id: string) => void	—	Fires with the reaction picked, before the ghost has landed.
open / defaultOpen	boolean	false	Controlled or initial bar visibility; hover and focus drive it when uncontrolled.
onOpenChange	(open: boolean) => void	—	Fires from hover, focus, Escape and a pick.
label	string	—	Names the message region for assistive technology.