Feedback Modal

Forms

About

A polished feedback modal component with an enhanced UI that takes inspiration from the Mixpanel design. The component features smooth animations, a clean layout with thumbs up/down buttons, an optional comment textarea, and a success state with confirmation.

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

Code

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

Usage.tsx

import { useState } from "react"
import { FeedbackModal } from "@/components/ui/feedback-modal"
import { Button } from "@/components/ui/button"

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

  return <>
    <Button onClick={() => setIsOpen(true)} size="lg" className="w-full sm:w-auto">
              Open Feedback Modal
            </Button>
  <FeedbackModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Submit Feedback"
        question="Was this page helpful?"
        placeholder="easy to use and provides a lot of useful data"
        onSubmit={(data) => {
          console.log("Feedback submitted:", data)
        }}
      />
  </>;
}