Skip to content
Mox UI

Emoji reaction

A tapback-style reaction button that opens a bar of Apple emoji and sends copies of your pick floating up out of it.

Click the button, then pick an emoji to throw it up the screen.

Installation

  1. 1

    Install the packages

    pnpm add motion react-apple-emojis lucide-react @radix-ui/react-slot clsx tailwind-merge
  2. 2

    Add the utility file

    lib/utils.ts
    import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs));}
  3. 3

    Copy and paste the code into your project

    Loading source…
  4. 4

    Update the import paths to match your project

    Point @/lib/utils to your utility file if your path aliases differ.

Usage

app/page.tsx
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>

Options

Pick a value to see the prop you would pass. Defaults are left out.

size
align
snippet.tsx
<EmojiReaction />

Props

PropTypeDefaultDescription
emojisstring[]Default: 5 default facesApple emoji names shown in the bar, hyphenated as on Emojipedia. Anything beyond the five defaults needs emojiData too.
emojiDataEmojiDataDefault: -Emoji name to image map passed to EmojiProvider. Defaults to the five bundled faces; pass react-apple-emojis/src/data.json for the full set.
onReact(name: string) => voidDefault: -Called with the emoji name every time one is picked, including each repeat while it's held down.
size"sm" | "md" | "lg"Default: "md"Scale of the button, the bar, and the emoji that fly up.
align"left" | "center" | "right"Default: "center"Which edge of the bar lines up with the trigger. It still shifts inward when it would run off screen.
asChildbooleanDefault: falseUses your own child as the trigger instead of the built-in button, so the bar can hang off a message, card, or image.
classNamestringDefault: -Extra classes merged onto the root element.

Click the button to pop the emoji bar open, or press and drag straight onto an emoji to pick it in one gesture. Hover an emoji to lift it. Pick one and 5 copies stream up off it, drifting apart, shrinking, and blurring out of focus as they climb. Hold the emoji down to keep them coming. The bar flips below the button when there's no room above, and arrow keys move along it. While it's open the button turns into a cross; click that, click outside, or press Escape to close. The button then shows your last pick.

Credits and license

Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Mox UI is appreciated when using a component.
  • Please don't resell the components as your own kit.
Contact Mox UI