Feedback Toast

Component 126

About

The FeedbackToast is a animated UI component designed to collect quick feedback from users in a non-intrusive way. It presents a thumbs-up/down prompt with an optional comment input when negative feedback is given. This component supports delayed auto-close behavior, smooth animations via framer-motion, and flexible feedback handling through a callback function.

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

Code

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

Usage.tsx

'use client'

import { useState } from "react"
import FeedbackToast from "@/components/ui/feedback-toast"

export default function Demo() {
  const [isToastVisible, setIsToastVisible] = useState(false)

  const handleAIResponse = () => {
    setIsToastVisible(true)
  }

  const handleFeedback = (type: "up" | "down", comment?: string) => {
    console.log("Feedback type:", type)
    if (comment) {
      console.log("User comment:", comment)
    }
  }

  return (
    <div className="p-8">
      <button
        onClick={handleAIResponse}
        className="px-4 py-2 bg-foreground text-background rounded-xl cursor-pointer"
      >
        Simulate Your Response
      </button>

      <FeedbackToast
        visible={isToastVisible}
        onClose={() => setIsToastVisible(false)}
        onFeedback={handleFeedback}
      />
    </div>
  )
}