103 Pro components and page blocks

Get Pro
uibrik

Reaction Bar

Pro

Preview

Customize

Accent
3–5
Tooltip delay400ms
Max8

Installation

Pro

Reaction Bar is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/reaction-bar

Usage

import { ReactionBar } from "@/components/uibrik/reaction-bar/reaction-bar";​const defaultValue = [  { emoji: "👍", count: 4, mine: true, users: ["Maya", "Leo", "Priya"] },  { emoji: "🎉", count: 2, users: ["Sam", "Noor"] },  // …1 more];​<ReactionBar  sort  accent=""  balloons={0}  fly  magnify  tooltip  tooltipDelay={400}  max={8}  disabled={false}  emojis="👍 ❤️ 😂 🎉 😮 🔥 👀 🙏"  defaultValue={defaultValue}  youLabel="You"  onReact={(emoji, added) => {}}  // value={[…]}  // onChange={(reactions) => {}}  // avatar={(name) => {}}/>

Props

ReactionBar
sort
Type boolean
true
Keep the chips ordered by count, most first.
accent
Type string
""
Fill of the chips you reacted with. Empty uses Apple's system blue.
balloons
Type number | [min, max]
[3, 5]
Copies of the emoji that float up as a reaction lands; a range picks a different count each time; 0 turns them off.
fly
Type boolean
true
A reaction picked from the tray flies in an arc to its chip; off, it lands in place.
magnify
Type boolean
true
Tray emoji magnify under the pointer like a dock.
tooltip
Type boolean
true
Show who reacted when a chip is hovered or focused.
tooltipDelay
Type number
400
How long the pointer rests on a chip before its tooltip shows. Once one is open, the next chip's shows at once.
max
Type number
8
Most different reactions; at the limit the add button hides.
disabled
Type boolean
false
Show the reactions without letting them change.
emojis
Type string[]
–
Emoji offered in the tray. Default: 👍 ❤️ 😂 🎉 😮 🔥 👀 🙏.
value / onChange
Type Reaction[] / (reactions) => void
–
Controlled reactions. A Reaction is { emoji, count, mine?, users? }; users are the other people who reacted, for the tooltip.
defaultValue
Type Reaction[]
[]
Reactions on mount when uncontrolled.
avatar
Type (name) => string
–
Avatar image URL for a name in the tooltip. Default: DiceBear notionists faces seeded by name.
onReact
Type (emoji, added) => void
–
Called on each toggle with the emoji and whether it was added or taken back.
youLabel
Type string
"You"
Name of the current user in the tooltip.
className
Type string
–
Classes for the row.