shadcn.io is not affiliated with official shadcn/ui
Grouped Reactions Notification Block for Ark UI
Two posts with who reacted in a sentence, reaction chips (icons and counts) that open a card listing each person, and a Thank everyone button with Undo.
Installation
Overview
Tell people who reacted to their posts without a row for each reaction, with this reaction notification for React with Ark UI. A compact header sits over one hairline frame with a plus mark on each corner. Two cells share hairlines, one per post of yours: a stack of initials, the time of the latest reaction, a sentence worked out from the list ("Ulrika Bergamo and 3 others reacted to your post"), the post quoted in two lines and its reactions as chips, an icon and a count. Hovering or focusing a chip opens a Hover Card that lists who used that reaction, as initials and names. The foot has Thank everyone, an outline Button, and Undo; thanking marks every person "Thanked" in the cards. The reactions are icons, a heart, a thumbs up and a party popper, never emoji. It's built from Hover Card, Button, Avatar and Avatar Group and Guides, with a CSS entrance only. For a recognition tool, a social feed or a team update.
FAQ
How do I fill it with my own posts and reactions?
Edit POSTS (an id, the time of the latest reaction and the text) and PEOPLE, one entry per person with the post they reacted to and the face they used. The sentence, the counts on the chips, the lists in the cards and the thanked total are all worked out from PEOPLE. To add a reaction, add a Face to KINDS and an icon to FaceIcon.
How do the cards open?
What does Thank everyone do, and what stays local?
It marks all nine people "Thanked" in the cards and says so in the status line; nothing is sent. Undo clears it. To make it real, send the thanks from the thank handler and keep the result with each reaction. Both buttons stay in place and focusable when there is nothing to do, and pressing them then says so.
Is it accessible?
Each chip is a button named for its reaction and the number of people ("Heart, 2 people") and described by a visually hidden sentence that lists them. The stacks of initials are decoration. The sentence over each post is a real heading, and the status line is a polite live region that is present from the start.