127 Components
Reaction Picker
OverlaysSlack-style floating emoji reaction bar with quick reactions, spring count bump badges, toggleable personal reaction state, hover tooltip user attributions, and an expandable full emoji picker with search.
Slack-Style Emoji Reaction BarSpring Physics & Popover
AV
Alexander VanceStaff Design TechnologistToday at 10:42 AM
Just shipped the brand-new financial charts and collaboration suite! All 60fps spring transitions are running smoothly in staging. Let me know your feedback! 🚀⚡
Click reaction badge to toggle your vote
Framer Motion Spring Count Bumps
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/reaction-picker.json"
Props
TypeScript props supported by <ReactionPicker />.
| Prop | Type | Default | Description |
|---|---|---|---|
| initialReactions | ReactionItem[] | — | Array of reaction items with emoji, count, reactedByMe state, and user list. |
| messageText | string | "Just shipped the brand-new financial charts..." | Text content of the message being reacted to. |
| authorName | string | "Alexander Vance" | Name of the message author. |
| authorRole | string | "Staff Design Technologist" | Role or title of the message author. |
| className | string | — | Additional CSS classes to apply to the root container. |
| inline | boolean | — | Whether reaction bar is rendered inline with content or in popover |
Key Features
- Floating quick reaction bar hovering seamlessly over message containers.
- Spring bounce animation on numeric reaction badges when voted or unvoted.
- Active user state highlighting reacted badges with tinted borders and glow fills.
- Expandable full emoji search picker popover with category filtering.
- Hover tooltip attribution displaying names of reacting teammates.
Keyboard & Accessibility
- Each reaction button includes descriptive aria-label with emoji name and current vote count.
- Full keyboard navigation through the quick bar and search picker popover.
- Color contrast adheres strictly to WCAG AA requirements in dark and light modes.