AceUi

Feedback Widget

An interactive feedback widget with emoji ratings, expandable comment form, and smooth animations for collecting user satisfaction data.

Tell us what you think!
The FeedbackWidget component provides an elegant way to collect user feedback with emoji-based satisfaction ratings, optional comments, and beautiful animations powered by Framer Motion

Installation

1npx shadcn@latest add "https://ace-ui-six.vercel.app/r/feedback-widget.json"

Usage

1import { FeedbackWidget } from "@/components/ui/feedback-widget";
2

3export default function Example() {
4return (
5  <div className="p-8">
6    <FeedbackWidget />
7  </div>
8);
9}

Features

  • Four emoji-based satisfaction levels (Excellent, Good, Fair, Poor)
  • Smooth animations and transitions with Framer Motion
  • Success state with animated confirmation
  • Mock API integration ready for real backend

Notice

This component includes a mock API function that simulates feedback submission. Replace the mockFeedbackAPI function with your actual API endpoint. The component uses Framer Motion for animations which adds to the bundle size.

Satisfaction Levels

The widget includes four predefined satisfaction levels:

1const SATISFACTION_LEVELS = [
2{
3  level: 4,
4  emoji: Laugh,
5  color: "text-green-600",
6  label: "Excellent",
7  hoverColor: "hover:bg-green-50 dark:hover:bg-green-900/20"
8},
9{
10  level: 3,
11  emoji: Smile,
12  color: "text-green-400", 
13  label: "Good",
14  hoverColor: "hover:bg-green-50 dark:hover:bg-green-900/20"
15},
16{
17  level: 2,
18  emoji: Frown,
19  color: "text-yellow-400",
20  label: "Fair", 
21  hoverColor: "hover:bg-yellow-50 dark:hover:bg-yellow-900/20"
22},
23{
24  level: 1,
25  emoji: Angry,
26  color: "text-red-600",
27  label: "Poor",
28  hoverColor: "hover:bg-red-50 dark:hover:bg-red-900/20"
29}
30];

Component Structure

The FeedbackWidget consists of several key parts:

  1. Header Section: Contains the question text and emoji rating buttons
  2. Expandable Form: Comment textarea and submit button (shows when rating selected)
  3. Success Message: Animated confirmation with checkmark icon
  4. State Management: Custom hook handling submission logic