Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chat blocks

Pro

Message Reactions Chat Block for React Aria

A friends' group chat with six glyph reactions as pills on each bubble, a count that opens who reacted, a quick-pick bar for the picked message and a most-reacted chip.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let friends answer a message with a glyph and see who is behind the number with this message reactions chat for React with React Aria. A hairline frame with a plus mark on each corner holds a window of fixed height for the Weekend crew group of Thumbstack, a friends' chat. Under the top bar, which carries a "Most reacted" chip worked out from the counts, the log is Message and Bubble rows with Bubble Reactions pills on each bubble's edge: the glyph is a Toggle that adds or removes your reaction, and the count opens a Popover titled "Reacted with Love" that lists who, with initials and "You". Press a message and the quick-pick bar above the composer, six more toggles, reacts to that one. The composer's Shine Button is the only colored control, the frame is ruled by Guides, and everything moves with CSS only.

FAQ

What stays in the page, and how do I make it real?

Everything. The thread, the six reactions and the people behind each count are typed in SEED, replies to what you send come from a short script and nothing is saved or sent. To wire it for real, call your API from react with the message and the glyph and let the server answer with the new tallies; the pills, the popover and the chip are all read from that one list.

Why glyphs and not emoji characters?

An emoji character renders per operating system and in color, and it cannot follow the theme. The six reactions are line glyphs with words (Thumbs up, Love, Laugh, Celebrate, Seen, Done) in the GLYPHS list, each with a hidden name for a screen reader. If you want emoji, change the icon cells of that list; the popover and the counts do not depend on them.

How do the count and the list agree?

They are the same data. Each reaction on a message is a tally of the glyph and the ids of the people behind it, and the number on the pill is that list's length, so adding yours changes both at once. Removing the last one removes the pill. The most-reacted chip adds the lengths over each friend's messages and names the highest.

How do I react with a keyboard?

Each bubble is a button with one tab stop in the log, on the picked message. Up and Down move the pick, Tab goes to the quick-pick toggles, and Space or Enter presses one. A pill is two buttons, the glyph and the count, and the popover opens with Enter and closes with Escape. A pressed glyph is filled, so the state is not carried by color alone.

What does the quick-pick bar react to?

To the message with the thin ring, named in the bar's line, which is the newest from a friend on load. Pressing any bubble, or moving with the arrow keys, picks another. Sending a message picks it too, so you can react to your own.

How does it look on a phone?

The "Most reacted" chip leaves the top bar below the small breakpoint, the pills wrap, and the six toggles sit under the line that names the message. The window keeps its height and only the log scrolls, even at 320 px wide.

All 200 chat blocks