Thumbs Down with Reasons

A chat feedback widget where thumbs-up/thumbs-down on an AI answer opens a small panel of quick reason chips plus an optional comment, so users can explain why an answer was bad. Ported to React from MM Rahman Bappi's 100 Free AI UI Components (MIT).

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

import ThumbsDownReasons from "@/components/ui/thumbs-down-reasons";

export default function ThumbsDownReasonsDemo() {
  return (
    <div
      className="tdr-demo min-h-screen w-full flex items-center justify-center p-6"
      style={{ background: "var(--bg)" }}
    >
      <ThumbsDownReasons />
    </div>
  );
}