KQ-866 · REACTION/TALLY

Reaction Tally

A tally row that keeps reactions in standing order. A vote that overtakes reorders the row and every chip travels to its new slot as a layout FLIP on glide, while the chip in front pulses a cobalt ring on each new vote and the counts roll to their new face on snap. The chips are aria-pressed buttons on a roving tabindex: Left and Right step without wrapping, Home and End jump to the loudest and the quietest, Space toggles your own vote, and focus rides the chip rather than the slot so the chip you are on keeps focus while it moves.

KQ-866 · REACTION/TALLY

Marta Ferreira
Dock three is clear from nine — the Basinworks pallets can go on the morning run.
15:02

no votes yet · yours 1

Install

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

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

Props

reactions: TallyReaction[]; default —; The kinds and other people's counts, in first-reacted order; ties keep that order so a level row never churns.
value / defaultValue: string[]; default []; Controlled or initial set of ids you have reacted to; your vote adds one to that kind's total.
onValueChange: (ids: string[]) => void; default —; Fires from a chip press or Space with the next set of your ids.
onRankChange: (rank: TallyRank) => void; default —; Fires with the order, the leader, its total and the margin over second place after every change.
text: string; default —; The message body the tally hangs under.
author: string; default —; Printed above the bubble.
time: string; default —; Sent time, printed under the bubble, already formatted.
label: string; default "Thread"; Names the thread list for assistive technology.

Prop	Type	Default	Description
reactions	TallyReaction[]	—	The kinds and other people's counts, in first-reacted order; ties keep that order so a level row never churns.
value / defaultValue	string[]	[]	Controlled or initial set of ids you have reacted to; your vote adds one to that kind's total.
onValueChange	(ids: string[]) => void	—	Fires from a chip press or Space with the next set of your ids.
onRankChange	(rank: TallyRank) => void	—	Fires with the order, the leader, its total and the margin over second place after every change.
text	string	—	The message body the tally hangs under.
author	string	—	Printed above the bubble.
time	string	—	Sent time, printed under the bubble, already formatted.
label	string	"Thread"	Names the thread list for assistive technology.