Feedback Widget

Forms 19

About

Feedback Widget Description: An interactive UI component for collecting user feedback. It allows users to give a quick "helpful" or "not-helpful" rating, provide an optional detailed comment, and submit their response. The component features smooth entry, exit, and state-change animations.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Feedback Widget to your project and fits it to your theme.

Code

How Feedback Widget is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
"use client";

import { useState } from "react";
import { AnimatePresence } from "framer-motion";
import { FeedbackWidget, FeedbackWidgetProps } from "@/components/ui/feedback-widget";
import { Button } from "@/components/ui/button";
import { Toaster, toast } from "sonner"; // Using sonner for notifications, a shadcn favorite

export default function FeedbackWidgetDemo() {
  const [isOpen, setIsOpen] = useState(false);

  // Simulate an API call
  const handleFeedbackSubmit: FeedbackWidgetProps['onSubmit'] = async (feedback) => {
    console.log("Submitting feedback:", feedback);
    
    // Fake delay
    await new Promise((resolve) => setTimeout(resolve, 1500));
    
    toast.success("Thank you for your feedback!");
    setIsOpen(false);
  };

  return (
    <div className="flex min-h-[350px] w-full items-center justify-center rounded-lg border border-dashed bg-background p-8">
      <Button onClick={() => setIsOpen(true)}>Leave Feedback</Button>
      
      {/* Required for toast notifications */}
      <Toaster richColors />

      {/* AnimatePresence handles the exit animation */}
      <AnimatePresence>
        {isOpen && (
          <FeedbackWidget
            onSubmit={handleFeedbackSubmit}
            onClose={() => setIsOpen(false)}
            placeholder="Solid answer, but could use more implementation steps"
          />
        )}
      </AnimatePresence>
    </div>
  );
}