KQ-931 · MENTION/LIST

Mention List

The inbox of every place your name came up, with the line you were named in and your handle set as a chip inside it. Rows arrive from distances.step on snap in a cascade while layout on glide carries the rows already there down to make room, and opening one flares its own wash and drains it over durations.page on the exit ease before dimming the row to read. A roving tabindex moves with Down and Up, Home and End jump, and Enter or Space opens.

KQ-931 · MENTION/LIST

Mentions

3 new · nothing open

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/mention-list

Props

mentions: Mention[]; default —; Newest first: id, author, room, time and the line you were named in.
handle: string; default "@you"; The token marked as a chip inside each line.
openId / defaultOpenId: string | null; default null; Controlled or initial open row.
onOpenChange: (id: string | null) => void; default —; Fires from the press or key that opened a row.
onOpen: (mention: Mention) => void; default —; Fires with the whole mention so the host can jump its thread.
readIds / defaultReadIds: string[]; default []; Controlled or initial read set.
onReadIdsChange: (ids: string[]) => void; default —; Fires from an open, or from the header's mark-all action.
onAnnounce: (sentence: string) => void; default —; The frozen sentence the polite region just spoke.
label: string; default "Mentions"; Heads the card and names the list.
markAllLabel: string; default "Mark all read"; Copy for the header action.
maxHeight: number; default 280; Scroll ceiling for the list, in px.

Prop	Type	Default	Description
mentions	Mention[]	—	Newest first: id, author, room, time and the line you were named in.
handle	string	"@you"	The token marked as a chip inside each line.
openId / defaultOpenId	string \| null	null	Controlled or initial open row.
onOpenChange	(id: string \| null) => void	—	Fires from the press or key that opened a row.
onOpen	(mention: Mention) => void	—	Fires with the whole mention so the host can jump its thread.
readIds / defaultReadIds	string[]	[]	Controlled or initial read set.
onReadIdsChange	(ids: string[]) => void	—	Fires from an open, or from the header's mark-all action.
onAnnounce	(sentence: string) => void	—	The frozen sentence the polite region just spoke.
label	string	"Mentions"	Heads the card and names the list.
markAllLabel	string	"Mark all read"	Copy for the header action.
maxHeight	number	280	Scroll ceiling for the list, in px.