shadcn.io is not affiliated with official shadcn/ui
Message With Reactions AI Block for React Aria
An assistant answer in a muted bubble with reaction pills at its end, an Add reaction popover of six icon reactions with their words, and a list of who reacted that updates with a status line.
Installation
Overview
Let a team mark an answer as they read it, with this AI message with reactions for React with React Aria. A compact header names the channel product and a hairline frame holds one turn: a question in a secondary Bubble and the assistant's answer in a muted one, with the catalog bubble reactions anchored to its end as pills, each an icon with a count (Helpful, Clear, Needs work). Yours is pressed; pressing a pill adds or removes it, once each. A plus button opens a Popover of six reactions, icons with their words and no emoji glyphs, and a "Who reacted" list names the people behind every count, with "No one yet" held in place for the empty ones. A polite status line says it aloud: "You and 3 others marked this helpful". It's built from Bubble, Message, Popover, Toggle, Button and Guides. For team channels, review queues and shared answers.
FAQ
Where are the reactions saved?
Nowhere: the names and counts are typed at the top of the file and your reactions live in the tab, as the status line says. To make it real, store one row per person, answer and reaction, and load the counts and the names with the answer; the pills, the list and the sentences are all worked out from that list.
Can I react more than once?
Once per reaction: pressing a pill or its row in the popover adds yours, pressing it again removes it, and the count goes up or down by one. You can use several different reactions on the same answer.
Why a list instead of a hover card for who reacted?
A hover card is hard to reach on a touch screen and with a keyboard, so the people are listed under the answer, where every device can read them. It has one line per reaction, so adding yours changes a name, not the height.