Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/feedback-widget// 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>
);
}