shadcn.io is not affiliated with official shadcn/ui
Reactions Comments Block for Vue
Feedback on a design draft where each comment ends in reaction chips with counts, an Add a reaction popover of six icons, who-reacted lines and a ranking of reactions beside the thread.
Installation
Overview
Let people answer a comment without writing one, with this reactions thread for Vue with Ark UI. A compact header names the draft. In a hairline frame, the feedback sits in a held scroll region at the start; every comment ends in a row of reaction chips, each a Toggle with an icon and a count that moves by one when you press it and back when you press it again, plus an Add a reaction button that opens a Popover with six icon reactions in a grid you can walk with the arrow keys. Hovering or focusing a chip names who reacted in a line that is always in place, so nothing moves. At the end, behind a divider, a cell ranks the six reactions across the whole thread with a bar each, worked out from the same counts. The reactions are icons, not emoji, so they look the same on every device. A polite status line says what you did. It is built from Toggle, Popover, Avatar, Button styles and Guides, with a CSS entrance only. For forums, design reviews and any discussion where a quick answer beats a reply.
FAQ
How do I fill it with my own thread?
Edit PEOPLE, REMARKS and REACTIONS. A remark has an id, who wrote it (by), an ISO at, its body and counts, one number per reaction in the order of REACTIONS. Chips show only the reactions that have a count, ordered by the typed counts, so pressing one never reorders them. The ranking and every total are worked out from the same list plus your own reactions.
How does the who-reacted line work?
Hovering or focusing a chip fills a line under the row, such as "Like: Ottilie Ferrand, Oren Tamsin and 6 others", and the chip's accessible name carries the same sentence ("Like, 8. You and 7 others"), so a screen reader hears it on arrival. The names here come from a fixed rule over the typed people; in your app, return the first few names with the count and keep the line's height reserved.
Can I use emoji instead of icons?
Yes. Replace ReactionIcon with a function that returns the emoji in an aria-hidden span and keep the label in the chip's name. The block uses icons so the reactions look the same on every platform and take the page's text colour.
What stays local?
Your reactions. The counts you see are the typed ones plus yours, nothing is saved, and the status line says so. To make it real, send the reaction from the toggle's handler, allow one reaction of each kind per person and comment, and return the new counts and names.
Is it accessible?
Every chip is a toggle that reports whether it is pressed and has a name made of the reaction, its count and who. The popover opens from a named button, its six toggles are reachable with Tab or the arrow keys, and Escape closes it and returns focus. The ranking is an ordered list with the rank spoken, and the bars are decoration beside the numbers.