shadcn.io is not affiliated with official shadcn/ui
Mention Lenses Notification Block for Radix UI
Mentions seen through four chips (All, @you, @team, @channel) with counts, each snippet marking its tag, naming its channel and offering Jump to message.
Installation
Overview
Sort the times people tagged you by who they tagged, with this mention notification for React with Radix UI. A compact header sits over one hairline frame with a plus mark on each corner. The first band is a row of chips, a Toggle Group of All, @you, @team and @channel, each with how many mentions it holds; choosing one narrows the list to that kind and the line at the foot says what it holds ("3 mentions of you, 2 unread."). Each mention shows who tagged whom and when, a snippet in which the tag is marked in a solid tint (never a colour), the channel in mono and a Jump to message Button. Unread is a dot, a heavier name and a spoken word; Jump marks the row read. Every kind holds three mentions, so the list keeps one height and All scrolls inside it. On a phone the chips scroll sideways. It's built from Toggle Group, Button, Avatar and Guides, with a CSS entrance only. For a wiki, a team chat, a document tool or any inbox that tags people.
FAQ
How do I fill it with my own mentions?
Edit MENTIONS. Each has an id, who tagged (by), an ISO at, the channel, the words before the tag, the token itself and the words after, the kind (you, team or channel) and whether it was unread. The tag is kept apart from the words so the block can mark it without any HTML. LENSES lists the chips; every count is worked out from MENTIONS.
How do the lenses work?
They are one single-choice group. Choosing a chip sets the lens and the list shows only the mentions of that kind; All shows every mention. The counts on the chips do not change when you choose, since they count what each lens holds. The line at the foot is the polite status: it says what the lens holds and how many are unread, and after a jump it says nothing opens in this demo.
What does Jump to message do?
In the demo it marks the mention read and says nothing opens. Point it at the message in your app (a link or a route change) in the jump handler. Read state is kept in the page and resets on reload.
Which keys work on the chips?
The group is one tab stop, and the arrow keys move between chips. Each chip is named with its count ("@you, 3 mentions"), and the chosen chip is a solid foreground fill.
Why does the list never change height?
Every kind holds the same three mentions, and every row has a fixed height with its snippet clamped to two lines (three on a phone), so choosing a lens only swaps the rows. The region is exactly three rows tall, and All scrolls inside it. If your kinds hold different counts, keep the region at a fixed height, as it is here, and let the shorter lists leave empty room.