React Dialog Block Reaction Picker

Reaction picker dialog with emoji grid, recent reactions, and skin tone selector for React chat apps

Looking to implement shadcn/ui blocks?

Join our Discord community for help from other developers.

Add expressive reactions to any content. This React reaction picker dialog displays a curated grid of emoji reactions with frequently used section and quick access to popular choices. Built with shadcn/ui Dialog and Button components using Tailwind CSS, users react to messages, posts, or comments with a single tap. Pick emoji, react instantly, express more—perfect for chat applications, social platforms, comment systems, or any Next.js application where emoji reactions increase user engagement and emotional expression.

"use client";

import { useState } from "react";
import { SmilePlus, Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { cn } from "@/lib/utils";

const reactions = [
  { emoji: "👍", label: "thumbs up" },
  { emoji: "❤️", label: "heart" },
  { emoji: "😂", label: "laugh" },
  { emoji: "😮", label: "wow" },
  { emoji: "😢", label: "sad" },
  { emoji: "🎉", label: "celebrate" },
  { emoji: "🔥", label: "fire" },
  { emoji: "👀", label: "eyes" },
  { emoji: "🚀", label: "rocket" },
  { emoji: "💯", label: "hundred" },
  { emoji: "👏", label: "clap" },
  { emoji: "🙌", label: "raised hands" },
];

const recentReactions = ["👍", "❤️", "🎉"];

export const title = "React Dialog Block Reaction Picker";

export default function DialogReactionPicker() {
  const [open, setOpen] = useState(false);
  const [selected, setSelected] = useState<string | null>(null);

  const handleSelect = (emoji: string) => {
    setSelected(emoji);
    setTimeout(() => {
      setOpen(false);
      setTimeout(() => setSelected(null), 200);
    }, 400);
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <div className="flex min-h-[350px] items-center justify-center">
        <DialogTrigger asChild>
          <Button variant="outline">
            <SmilePlus className="mr-2 h-4 w-4" />
            Add Reaction
          </Button>
        </DialogTrigger>
      </div>
      <DialogContent style={{ maxWidth: "320px" }} className="p-4">
        <DialogTitle className="sr-only">Add Reaction</DialogTitle>
        {selected ? (
          <div className="flex flex-col items-center justify-center py-8">
            <span className="text-5xl">{selected}</span>
            <div className="flex items-center gap-1 mt-3 text-sm text-muted-foreground">
              <Check className="h-4 w-4" />
              Reaction added
            </div>
          </div>
        ) : (
          <div className="space-y-3">
            {/* Recent */}
            <div>
              <p className="text-xs text-muted-foreground mb-2">Recent</p>
              <div className="flex gap-1">
                {recentReactions.map((emoji) => (
                  <button
                    key={emoji}
                    onClick={() => handleSelect(emoji)}
                    className="h-10 w-10 rounded-md hover:bg-muted flex items-center justify-center text-xl transition-colors"
                  >
                    {emoji}
                  </button>
                ))}
              </div>
            </div>

            {/* All reactions */}
            <div>
              <p className="text-xs text-muted-foreground mb-2">All</p>
              <div className="grid grid-cols-6 gap-1">
                {reactions.map((reaction) => (
                  <button
                    key={reaction.emoji}
                    onClick={() => handleSelect(reaction.emoji)}
                    aria-label={reaction.label}
                    className={cn(
                      "h-10 w-10 rounded-md flex items-center justify-center text-xl transition-colors",
                      "hover:bg-muted"
                    )}
                  >
                    {reaction.emoji}
                  </button>
                ))}
              </div>
            </div>
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}

"use client";import { useState } from "react";import { SmilePlus, Check } from "lucide-react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";import { cn } from "@/lib/utils";const reactions = [  { emoji: "👍", label: "thumbs up" },  { emoji: "❤️", label: "heart" },  { emoji: "😂", label: "laugh" },  { emoji: "😮", label: "wow" },  { emoji: "😢", label: "sad" },  { emoji: "🎉", label: "celebrate" },  { emoji: "🔥", label: "fire" },  { emoji: "👀", label: "eyes" },  { emoji: "🚀", label: "rocket" },  { emoji: "💯", label: "hundred" },  { emoji: "👏", label: "clap" },  { emoji: "🙌", label: "raised hands" },];const recentReactions = ["👍", "❤️", "🎉"];export const title = "React Dialog Block Reaction Picker";export default function DialogReactionPicker() {  const [open, setOpen] = useState(false);  const [selected, setSelected] = useState<string | null>(null);  const handleSelect = (emoji: string) => {    setSelected(emoji);    setTimeout(() => {      setOpen(false);      setTimeout(() => setSelected(null), 200);    }, 400);  };  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <SmilePlus className="mr-2 h-4 w-4" />            Add Reaction          </Button>        </DialogTrigger>      </div>      <DialogContent style={{ maxWidth: "320px" }} className="p-4">        <DialogTitle className="sr-only">Add Reaction</DialogTitle>        {selected ? (          <div className="flex flex-col items-center justify-center py-8">            <span className="text-5xl">{selected}</span>            <div className="flex items-center gap-1 mt-3 text-sm text-muted-foreground">              <Check className="h-4 w-4" />              Reaction added            </div>          </div>        ) : (          <div className="space-y-3">            {/* Recent */}            <div>              <p className="text-xs text-muted-foreground mb-2">Recent</p>              <div className="flex gap-1">                {recentReactions.map((emoji) => (                  <button                    key={emoji}                    onClick={() => handleSelect(emoji)}                    className="h-10 w-10 rounded-md hover:bg-muted flex items-center justify-center text-xl transition-colors"                  >                    {emoji}                  </button>                ))}              </div>            </div>            {/* All reactions */}            <div>              <p className="text-xs text-muted-foreground mb-2">All</p>              <div className="grid grid-cols-6 gap-1">                {reactions.map((reaction) => (                  <button                    key={reaction.emoji}                    onClick={() => handleSelect(reaction.emoji)}                    aria-label={reaction.label}                    className={cn(                      "h-10 w-10 rounded-md flex items-center justify-center text-xl transition-colors",                      "hover:bg-muted"                    )}                  >                    {reaction.emoji}                  </button>                ))}              </div>            </div>          </div>        )}      </DialogContent>    </Dialog>  );}

Pro membership required for block code

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dialog-reaction-picker.json

npx shadcn@latest add https://www.shadcn.io/registry/dialog-reaction-picker.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/dialog-reaction-picker.json

bunx shadcn@latest add https://www.shadcn.io/registry/dialog-reaction-picker.json

Pro block — Sign in to install

React Dialog Block Emoji Picker

Full emoji keyboard

React Dialog Block Quick Reply

Message replies

React Dialog Block Add Comment

Comment forms

React Dialog Block Feedback Rating

Star ratings

React Dialog Block App Rating

App feedback

React Dialog Block Quick Actions

Quick selections

Questions you might have

"use client"; import { useState } from "react"; import { SmilePlus, Check } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { cn } from "@/lib/utils"; const reactions = [ { emoji: "👍", label: "thumbs up" }, { emoji: "❤️", label: "heart" }, { emoji: "😂", label: "laugh" }, { emoji: "😮", label: "wow" }, { emoji: "😢", label: "sad" }, { emoji: "🎉", label: "celebrate" }, { emoji: "🔥", label: "fire" }, { emoji: "👀", label: "eyes" }, { emoji: "🚀", label: "rocket" }, { emoji: "💯", label: "hundred" }, { emoji: "👏", label: "clap" }, { emoji: "🙌", label: "raised hands" }, ]; const recentReactions = ["👍", "❤️", "🎉"]; export const title = "React Dialog Block Reaction Picker"; export default function DialogReactionPicker() { const [open, setOpen] = useState(false); const [selected, setSelected] = useState<string | null>(null); const handleSelect = (emoji: string) => { setSelected(emoji); setTimeout(() => { setOpen(false); setTimeout(() => setSelected(null), 200); }, 400); }; return ( <Dialog open={open} onOpenChange={setOpen}> <div className="flex min-h-[350px] items-center justify-center"> <DialogTrigger asChild> <Button variant="outline"> <SmilePlus className="mr-2 h-4 w-4" /> Add Reaction </Button> </DialogTrigger> </div> <DialogContent style={{ maxWidth: "320px" }} className="p-4"> <DialogTitle className="sr-only">Add Reaction</DialogTitle> {selected ? ( <div className="flex flex-col items-center justify-center py-8"> <span className="text-5xl">{selected}</span> <div className="flex items-center gap-1 mt-3 text-sm text-muted-foreground"> <Check className="h-4 w-4" /> Reaction added </div> </div> ) : ( <div className="space-y-3"> {/* Recent */} <div> <p className="text-xs text-muted-foreground mb-2">Recent</p> <div className="flex gap-1"> {recentReactions.map((emoji) => ( <button key={emoji} onClick={() => handleSelect(emoji)} className="h-10 w-10 rounded-md hover:bg-muted flex items-center justify-center text-xl transition-colors" > {emoji} </button> ))} </div> </div> {/* All reactions */} <div> <p className="text-xs text-muted-foreground mb-2">All</p> <div className="grid grid-cols-6 gap-1"> {reactions.map((reaction) => ( <button key={reaction.emoji} onClick={() => handleSelect(reaction.emoji)} aria-label={reaction.label} className={cn( "h-10 w-10 rounded-md flex items-center justify-center text-xl transition-colors", "hover:bg-muted" )} > {reaction.emoji} </button> ))} </div> </div> </div> )} </DialogContent> </Dialog> ); }

React Dialog Block Reaction Picker

Installation

Related blocks you will also like

React Dialog Block Emoji Picker

React Dialog Block Quick Reply

React Dialog Block Add Comment

React Dialog Block Feedback Rating

React Dialog Block App Rating

React Dialog Block Quick Actions

Questions you might have

How many reactions should users add?

Should users add custom reactions?

How should reactions be displayed?

Should reactions trigger notifications?

Should I track reaction analytics?

How do I make reactions accessible?