Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

Grouped Reactions Notification Block for React

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.

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

Tell people who reacted to their posts without a row for each reaction, with this reaction notification for React with Base 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?

The block controls the card itself so it opens on hover, on focus and on a tap on a touch screen, and closes on Escape or when focus leaves the chip.The card holds no controls, so nothing in it needs a Tab stop; the same names are in the chip's description for a screen reader.

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.

How does it look on a phone?

The two cells stack, still divided by a hairline. The chips stay in one row that wraps, and the foot puts the line over the two buttons.

  • Pro

    Reaction Picker Dialog

    Drawers and popovers

    A community chat with a reaction tray shown open under one message: six quick reactions, a More button that opens twelve more in one grid, arrow keys across it, and pills with counts on the message.

  • Pro

    Pin Limit List Notification

    Sort and find

    Notifications split into Pinned and Recent with a pin on every row and a limit of three: the pinned ones stay on top in the order you pinned them, and at three the other pins say to unpin one first.

  • Pro

    Reply Composer Notification

    Conversations

    A reply notification with the quoted original (clamped, with Show more), the reply in full and a composer that sends a local reply into a mini thread, with Edit.

  • Pro

    Feedback Request Notification

    Asks and consent

    A writing app's feedback card drawn over its drafts page: five stars, a question that follows the rating, a thank-you that stays on the page, and a memory in the tab so it asks once and Ask again brings it back.

  • Pro

    Mention Lenses Notification

    Sort and find

    Mentions seen through four chips (All, @you, @team, @channel) with counts, each snippet marking its tag, naming its channel and offering Jump to message.

  • Pro

    File Comments Notification

    Conversations

    Review comments grouped by file, each quoting the line it is about, with a Resolve toggle that moves a comment into a collapsed resolved group and back.

All 100 notification blocks