KQ-857 · MENTION/POP
Mention Pop
Names that complete as you type. An @ opens the room's members in a list that rises above the composer from eight pixels on snap, rows cascading in with a presence dot that says in words who is here; picking one wraps the typed name as a chip whose wash scales from the left edge on snap around glyphs the textarea already drew, and sending lands the message in the thread where its chips glow once — a fill flashes and a ring flares outward on a tween. Up and Down move the highlight, Home and End jump, Enter or Tab inserts, Escape closes; with the list shut Enter sends and Shift+Enter breaks the line.
- Marta@Ines the pump on line two is back up. Who takes the night check?
- RuiI can, if the gate log is signed by six.
Type @ to mention someone. Up and Down choose, Enter or Tab inserts, Escape closes the list. Enter sends, Shift+Enter breaks the line.
Type @ to mention · 0 sent
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/mention-pop
Props
- members
- MentionMember[]
- default —
- Who can be mentioned: id, name, a mono handle searched alongside it, and presence (online, away or offline).
- messages
- MentionMessage[]
- default —
- The thread, oldest first: id, from ("me" or a sender's name) and text with @Name tokens. Append the sent message here from onSend.
- value / defaultValue
- string
- default ""
- Controlled or initial composer text.
- onValueChange
- (text: string) => void
- default —
- Fires on every edit and on the clear after a send.
- onSend
- (text: string, mentioned: string[]) => void
- default —
- Fires from Enter or the Send button with the trimmed text and the member ids mentioned in it.
- placeholder
- string
- default "Message the room"
- Composer placeholder.
- label
- string
- default —
- Names the thread and the composer for assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
| members | MentionMember[] | — | Who can be mentioned: id, name, a mono handle searched alongside it, and presence (online, away or offline). |
| messages | MentionMessage[] | — | The thread, oldest first: id, from ("me" or a sender's name) and text with @Name tokens. Append the sent message here from onSend. |
| value / defaultValue | string | "" | Controlled or initial composer text. |
| onValueChange | (text: string) => void | — | Fires on every edit and on the clear after a send. |
| onSend | (text: string, mentioned: string[]) => void | — | Fires from Enter or the Send button with the trimmed text and the member ids mentioned in it. |
| placeholder | string | "Message the room" | Composer placeholder. |
| label | string | — | Names the thread and the composer for assistive technology. |