Components
Loading preview...
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.
@arunachalam0606
npx shadcn@latest add https://21st.dev/r/arunachalam0606/feedback-toast'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>
)
}