React Dialog Block Feedback Rating

Feedback rating dialog with emoji scale selector, optional comment textarea, and submit button

Looking to implement shadcn/ui blocks?

Join our Discord community for help from other developers.

Capture user sentiment instantly. This React feedback dialog presents an emoji-based rating scale from angry to delighted, with optional comment textarea for detailed feedback. Built with shadcn/ui Dialog, Button, Textarea components and custom emoji selectors, users rate their experience with intuitive visual indicators. Animated selection states, character count, and clean layout—perfect for post-interaction surveys, feature feedback, or any app where understanding user satisfaction drives product improvement.

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

const ratings = [
  { value: 1, emoji: "😠", label: "Terrible" },
  { value: 2, emoji: "😕", label: "Poor" },
  { value: 3, emoji: "😐", label: "Okay" },
  { value: 4, emoji: "😊", label: "Good" },
  { value: 5, emoji: "😍", label: "Amazing" },
];

export const title = "React Dialog Block Feedback Rating";

export default function DialogFeedbackRating() {
  const [open, setOpen] = useState(false);
  const [selectedRating, setSelectedRating] = useState<number | null>(null);
  const [comment, setComment] = useState("");

  const handleSubmit = () => {
    console.log({ rating: selectedRating, comment });
    setOpen(false);
    setSelectedRating(null);
    setComment("");
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <div className="flex min-h-[350px] items-center justify-center">
        <DialogTrigger asChild>
          <Button variant="outline">Give Feedback</Button>
        </DialogTrigger>
      </div>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>How was your experience?</DialogTitle>
          <DialogDescription>
            Your feedback helps us improve. Select a rating and optionally leave
            a comment.
          </DialogDescription>
        </DialogHeader>

        <div className="py-4">
          <div className="flex justify-between gap-2">
            {ratings.map((rating) => (
              <button
                key={rating.value}
                onClick={() => setSelectedRating(rating.value)}
                className={cn(
                  "flex flex-col items-center gap-1 p-3 rounded-lg transition-all",
                  "hover:bg-muted",
                  selectedRating === rating.value
                    ? "bg-primary/10 ring-2 ring-primary"
                    : "bg-muted/50"
                )}
              >
                <span className="text-2xl">{rating.emoji}</span>
                <span className="text-xs text-muted-foreground">
                  {rating.label}
                </span>
              </button>
            ))}
          </div>

          <div className="mt-4 space-y-2">
            <Textarea
              placeholder="Tell us more about your experience (optional)"
              value={comment}
              onChange={(e) => setComment(e.target.value)}
              className="min-h-[100px] resize-none"
              maxLength={500}
            />
            <p className="text-xs text-muted-foreground text-right">
              {comment.length}/500
            </p>
          </div>
        </div>

        <DialogFooter>
          <Button
            onClick={handleSubmit}
            disabled={selectedRating === null}
            className="w-full"
          >
            Submit Feedback
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

"use client";import { useState } from "react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";import { Textarea } from "@/components/ui/textarea";import { cn } from "@/lib/utils";const ratings = [  { value: 1, emoji: "😠", label: "Terrible" },  { value: 2, emoji: "😕", label: "Poor" },  { value: 3, emoji: "😐", label: "Okay" },  { value: 4, emoji: "😊", label: "Good" },  { value: 5, emoji: "😍", label: "Amazing" },];export const title = "React Dialog Block Feedback Rating";export default function DialogFeedbackRating() {  const [open, setOpen] = useState(false);  const [selectedRating, setSelectedRating] = useState<number | null>(null);  const [comment, setComment] = useState("");  const handleSubmit = () => {    console.log({ rating: selectedRating, comment });    setOpen(false);    setSelectedRating(null);    setComment("");  };  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">Give Feedback</Button>        </DialogTrigger>      </div>      <DialogContent className="sm:max-w-md">        <DialogHeader>          <DialogTitle>How was your experience?</DialogTitle>          <DialogDescription>            Your feedback helps us improve. Select a rating and optionally leave            a comment.          </DialogDescription>        </DialogHeader>        <div className="py-4">          <div className="flex justify-between gap-2">            {ratings.map((rating) => (              <button                key={rating.value}                onClick={() => setSelectedRating(rating.value)}                className={cn(                  "flex flex-col items-center gap-1 p-3 rounded-lg transition-all",                  "hover:bg-muted",                  selectedRating === rating.value                    ? "bg-primary/10 ring-2 ring-primary"                    : "bg-muted/50"                )}              >                <span className="text-2xl">{rating.emoji}</span>                <span className="text-xs text-muted-foreground">                  {rating.label}                </span>              </button>            ))}          </div>          <div className="mt-4 space-y-2">            <Textarea              placeholder="Tell us more about your experience (optional)"              value={comment}              onChange={(e) => setComment(e.target.value)}              className="min-h-[100px] resize-none"              maxLength={500}            />            <p className="text-xs text-muted-foreground text-right">              {comment.length}/500            </p>          </div>        </div>        <DialogFooter>          <Button            onClick={handleSubmit}            disabled={selectedRating === null}            className="w-full"          >            Submit Feedback          </Button>        </DialogFooter>      </DialogContent>    </Dialog>  );}

Pro membership required for block code

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dialog-feedback-rating.json

npx shadcn@latest add https://www.shadcn.io/registry/dialog-feedback-rating.json

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

bunx shadcn@latest add https://www.shadcn.io/registry/dialog-feedback-rating.json

Pro block — Sign in to install

React Dialog Block Success Confirmation

Success dialog with checkmark

React Dialog Block Edit Profile Form

Form dialog with input fields

React Dialog Block Share Link

Share dialog with copy link

React Dialog Block Create Workspace

Form dialog with switch toggle

React Dialog Block Two Actions

Dialog with two action buttons

React Dialog Block Report Content

Report dialog with reason selection

Questions you might have

"use client"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { Textarea } from "@/components/ui/textarea"; import { cn } from "@/lib/utils"; const ratings = [ { value: 1, emoji: "😠", label: "Terrible" }, { value: 2, emoji: "😕", label: "Poor" }, { value: 3, emoji: "😐", label: "Okay" }, { value: 4, emoji: "😊", label: "Good" }, { value: 5, emoji: "😍", label: "Amazing" }, ]; export const title = "React Dialog Block Feedback Rating"; export default function DialogFeedbackRating() { const [open, setOpen] = useState(false); const [selectedRating, setSelectedRating] = useState<number | null>(null); const [comment, setComment] = useState(""); const handleSubmit = () => { console.log({ rating: selectedRating, comment }); setOpen(false); setSelectedRating(null); setComment(""); }; return ( <Dialog open={open} onOpenChange={setOpen}> <div className="flex min-h-[350px] items-center justify-center"> <DialogTrigger asChild> <Button variant="outline">Give Feedback</Button> </DialogTrigger> </div> <DialogContent className="sm:max-w-md"> <DialogHeader> <DialogTitle>How was your experience?</DialogTitle> <DialogDescription> Your feedback helps us improve. Select a rating and optionally leave a comment. </DialogDescription> </DialogHeader> <div className="py-4"> <div className="flex justify-between gap-2"> {ratings.map((rating) => ( <button key={rating.value} onClick={() => setSelectedRating(rating.value)} className={cn( "flex flex-col items-center gap-1 p-3 rounded-lg transition-all", "hover:bg-muted", selectedRating === rating.value ? "bg-primary/10 ring-2 ring-primary" : "bg-muted/50" )} > <span className="text-2xl">{rating.emoji}</span> <span className="text-xs text-muted-foreground"> {rating.label} </span> </button> ))} </div> <div className="mt-4 space-y-2"> <Textarea placeholder="Tell us more about your experience (optional)" value={comment} onChange={(e) => setComment(e.target.value)} className="min-h-[100px] resize-none" maxLength={500} /> <p className="text-xs text-muted-foreground text-right"> {comment.length}/500 </p> </div> </div> <DialogFooter> <Button onClick={handleSubmit} disabled={selectedRating === null} className="w-full" > Submit Feedback </Button> </DialogFooter> </DialogContent> </Dialog> ); }

React Dialog Block Feedback Rating

Installation

Related blocks you will also like

React Dialog Block Success Confirmation

React Dialog Block Edit Profile Form

React Dialog Block Share Link

React Dialog Block Create Workspace

React Dialog Block Two Actions

React Dialog Block Report Content

Questions you might have

What rating scale works best for feedback?

When should I show the feedback dialog?

Should the comment field be required?

Should feedback be anonymous or identified?

How should I follow up on feedback?

How do I analyze feedback at scale?