shadcn.io is not affiliated with official shadcn/ui
Mentions Comments Block for Radix UI
A note composer beside a live explanation of its @mentions: who is notified, who is not in the thread yet with an Add to thread button, what a group expands to and handles that match no one.
Installation
Overview
Show people what an @ will do before they post it, with this mentions block for React with Radix UI. A compact header sits over a frame of two cells on one hairline. The first holds a note, a Textarea already filled with a few mentions, a one-line hint, the Shine Button that posts it and a "Last posted" slot that shows the note with its mention chips. The second answers, as you type, from a typed roster: who will be notified (people already in the note's thread), who is not in the thread yet (each with an Add to thread button that moves them up), what a group expands to (a Collapsible button such as "@design, 4 people") and handles that match no one ("No one named @zed"). Posting says who was notified, in this demo, and that nothing was sent. The cells stack on a phone, with the explanation under the note. It is built from Textarea, Collapsible, Field, Avatar, Button, Shine Button and Guides, with a CSS entrance only. For notes apps, issue trackers and any editor where an @ pulls people in.
FAQ
How do I use my own people and groups?
Edit ROSTER (a handle, initials, job and name for each person), GROUPS (a handle and the handles it expands to) and START_THREAD, the people already in the thread. The explanation is worked out from those and the note's text with one pattern, MENTION: an @ followed by a letter and then letters, digits, hyphens or underscores. Handles are matched without regard to case.
Who counts as notified?
Only people who are in the note's thread. Someone you mention who is not in it appears under "Not in the thread" and would not be notified until you add them; the Add to thread button does that and moves them to the notified list, with the status line saying so. That is one common rule, and your app's may differ: if mentioning should add people, change add to run on post.
Where is the picker that suggests names?
Not here. This block explains the result of a mention; the Mention Autocomplete block is the picker that opens a list under the caret. Put the two together by letting the picker insert the handle and this explanation read the note.
What stays local?
Everything. Posting puts the note and its chips in the Last posted slot, and the status line says "Notified 2 people in this demo; nothing was sent." To make it real, resolve the handles on the server when the note is posted, send the notifications from there, and store the mentions with the note so they survive a rename.
Is it accessible?
The note has a label, the explanation is a labelled region you can reach with Tab, and its lists are real lists with names in text. Add to thread buttons say whom they add. A group's members are inside a button that reports whether it is open. The status line is read out politely after each action; the explanation itself updates quietly as you type, so it does not talk over your typing.