A name in a sentence that points at something real
Typing @ reaches for an entity, a person or a file. Typing / reaches for a skill. Either one opens a menu that narrows as the word grows, and the choice stays in the text as a tag, in the field while it is being written and in the message once it is sent.
The tag
A mention takes the type around it and adds a colour and a soft fill. The trigger character sits a step quieter than the name. It has no weight or spacing of its own, so it can be laid over the text of an input without moving a letter.
Ask @Mira Castellan to look over @roadmap.md, then run /ship.
The menu
The menu never takes focus. The caret stays in the field, which owns the arrow keys and tells assistive technology which row is highlighted. Part way through a word, the typed part of each name holds full strength and the rest steps back.
In the Composer
Composer wires the whole pattern through one prop. Type @ or / at the start of a word. Arrows move through the menu, Enter or Tab writes the choice, and Escape closes it. Send the message to see the same tags in the bubble. The value stays a plain string throughout: a mention is recognised wherever its exact name stands, and stops being one when the name is edited.
// From the npm package
import { Mention } from 'rift-ds/components/Mention/Mention';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/mention.json