Emoji Feedback Form

Forms

About

The component features smooth animations, hover effects, and a polished design with gradient backgrounds. It includes a rating system with emoji reactions, an optional feedback textarea, and a success state after submission. The demo page showcases the component with realistic props, and I've also created a home page that lists all components in your collection.

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

Code

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

Usage.tsx


import { StreamFeedback } from "@/components/ui/emoji-feedback-form"

export default function StreamFeedbackDemo() {
  return (
    <StreamFeedback
      title="Your stream has ended!"
      subtitle="We'd love your feedback on the video experience of this stream."
      question="How was the quality of the live event?"
      placeholder="There was some lagging moments and the video quality wasn't the highest"
      onSubmit={(rating, feedback) => {
        console.log("Rating:", rating, "Feedback:", feedback)
      }}
      onBack={() => {
        console.log("Back to community clicked")
      }}
      submitButtonText="Submit feedback"
      backButtonText="Back to community"
    />
  )
}