Mentions
Mentioning people in a comment, the way collaborative editors do it: type @ and a picker opens at the caret, and the person you pick flies out of the list into the sentence as a chip.
Pricing page v3 is ready. The yearly toggle copy still feels long to me.
Reply, or type @ to mention someone
Mention someone to notify them
Things to try
- Type @. A picker springs open right at the caret, not under the box.
- Keep typing. The list narrows to the people who still match, and the highlight glides between them as you point or use the arrow keys.
- Pick someone. Their face flies out of the list into the sentence as a chip, and they join the row of people who'll be notified.
- Send. The comment rises into the thread above.
Install
npx shadcn@latest add https://your-docs-site/r/editor-mentions.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @base-ui/react @hugeicons/core-free-icons @hugeicons/react motionHow it works
- One face, a new place. The avatar in the picker and the avatar in the chip are the same element moving, which is what Motion's
layoutIdis for, so the face travels from the list into the text instead of appearing there. - The picker is Base UI's Popover, so focus, dismissal and positioning at the caret are handled for you; the Send button's shortcut hint is Base UI's Tooltip.
The people are made up. Avatars are illustrations from DiceBear.
Logo morph
A name that turns into its logo and back again. The letters flow into the mark instead of fading, in either direction, and you can turn it round halfway.
Event RSVP
An RSVP button that grows into a sheet for your answer, saves with a progress bar, and becomes your spot, all in one tray. Built almost entirely from Base UI parts.