Emoji Reaction React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import EmojiReaction from @/components/ui/emoji-reaction.

import { EmojiReaction } from "@/components/ui/emoji-reaction"

export function Demo() {
  return <EmojiReaction onReact={(name) => console.log(name)} />
}

// or hang the bar off your own element:
// <EmojiReaction asChild>
//   <button className="rounded-2xl bg-card p-4">Nice work</button>
// </EmojiReaction>

Props

• sizedefault "md"
  "sm" | "md" | "lg"

  Scale of the button, the bar, and the emoji that fly up. The trigger is 32px (sm), 40px (md) or 48px (lg).

• aligndefault "center"
  "left" | "center" | "right"

  Which edge of the bar lines up with the trigger. It still shifts inward when it would run off screen.

• asChilddefault false
  boolean

  Uses your own child as the trigger instead of the built-in button, so the bar can hang off a message, card, or image.

• surfaceColordefault "auto"
  string

  Fill of the trigger, the bar and its tail, any CSS color. Auto is #F4F4F9 on light pages and #262626 on dark ones.

• burstCountdefault 5
  number

  How many copies of the emoji fly up per reaction. Holding an emoji repeats the burst, and at most 60 copies are in the air at once.

• risedefault 450
  number

  How far the copies climb before they fade out, in pixels. Each copy varies it a little.

• holdIntervaldefault 550
  number

  While an emoji is held down, a new burst fires this often, in milliseconds.

• defaultOpendefault false
  boolean

  Starts with the bar open, for a first-run hint or a screenshot. It does not take focus until the user opens it themselves.

• openLabeldefault "Add a reaction"
  string

  Accessible name of the trigger before any reaction.

• closeLabeldefault "Close reactions"
  string

  Accessible name of the trigger while the bar is open.

• reactedLabeldefault "Reacted {emoji}"
  string

  Accessible name of the trigger after a reaction; {emoji} fills in its name.

• menuLabeldefault "Pick a reaction"
  string

  Accessible name of the emoji bar.

• emojiBaseUrldefault "https://em-content.zobj.net/source/apple/419/"
  string

  Where the built-in five faces load from; point it at your own mirror of the same file names. Ignored when emojiData is passed.

• emojisdefault "["smiling-face-with-hearts", "star-struck", "confused-face", "pleading-face", "grinning-face-with-smiling-eyes"]"
  string[]

  Apple emoji names shown in the bar, hyphenated as on Emojipedia. Anything beyond the five defaults needs emojiData too.

• emojiDatadefault "built-in Apple emoji set (the five defaults)"
  EmojiData

  Emoji name to image map passed to EmojiProvider. Defaults to the five bundled faces served from the emojipedia CDN; pass react-apple-emojis/src/data.json for the full set.

• onReact
  (name: string) => void

  Called with the emoji name every time one is picked, including each repeat while it is held down.

• children
  ReactNode

  The custom trigger when asChild is set. Ignored otherwise.

• className
  string

  Extra classes merged onto the root element; other div props are spread onto it too.

FAQ

More React feedback components