Message reactionsPro

A reactions row under a message: chips with counts, your own in the accent, an add picker, and counts that roll digit by digit.

Markdown

On this page

ProA release thread collects reactions. Your own wear the accent and counts roll digit by digit as people respond.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/message-reactions

Usage

tsx

import { MessageReactions } from "@/components/ui/chatcn/pro/message-reactions"

<MessageReactions
  reactions={reactions}
  options={[{ id: "agree", icon: <ThumbsUpIcon />, label: "Agree" }]}
  onToggle={(id) => toggleReaction(messageId, id)}
/>

Reactions are icons with meanings (Agree, Done, Looking), not emoji, so the row stays as calm as the chrome around it; pass your own glyphs if your product uses them. Your reactions wear an accent tint and edge. The tooltip names who reacted: You, Bao Tran and 2 others. Counts roll per digit, so 9 becoming 10 rolls the ones and adds a column while the rest of the row stays still. The add button opens a grid of options that shows which you already chose. Chips that arrive after mount grow in from their center; history appears at once.

Examples

States

ProNone yet, your own to toggle, big counts, many kinds, and disabled.

Props

Prop	Type	Notes
`reactions`	`Reaction[]`	`{ id, icon, label, count, reacted?, people? }`
`options`	`ReactionOption[]`	What the picker offers. No picker without it
`onToggle`	`(id) => void`	Add or remove the reader's reaction
`disabled`	`boolean`
`labels`	`{ add?, you? }`	For translation

Keyboard

Key	Action
Enter or Space on a chip	Toggle your reaction
Arrow keys in the picker	Move through the grid; Home and End jump
Escape	Close the picker and return to the add button

Accessibility

Chips are toggle buttons with aria-pressed, named by meaning and count.
The rolling digits are hidden; the count is read once as a number.

Motion

Digits roll in 200 ms on the kit's ease out. New chips enter from scale 0.96 with a fade, and press to 0.97. Reduced motion changes digits instantly.