Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Feedback Popover for React

A Feedback button that opens Send Feedback, a short encouragement, a message box, and Submit Feedback.

Feedback opens a panel titled Send Feedback, with the line We'd love to hear your thoughts! A message box and a full-width Submit Feedback button sit under it. Submit closes the panel.

Use it to collect a comment without leaving the page. Submit does not send the text until you handle it. A longer form belongs in a Dialog. In React, Base UI does not deliver the feedback.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Popover anatomy: trigger, title, positioner, arrow, description, content

Usage

<Popover onOpenChange={setOpen} open={open}>
  <PopoverTrigger render={<Button variant="outline" />}>
    <MessageSquareIcon aria-hidden="true" data-icon="inline-start" />
    Feedback
  </PopoverTrigger>
  <PopoverContent className="w-80 max-w-full">
    <PopoverHeader>
      <PopoverTitle>Send Feedback</PopoverTitle>
      <PopoverDescription>
        We'd love to hear your thoughts!
      </PopoverDescription>
    </PopoverHeader>
    <Textarea
      aria-label="Feedback"
      className="min-h-24"
      placeholder="Share your feedback..."
    />
    <Button className="w-full" onClick={handleSubmit}>
      Submit Feedback
    </Button>
  </PopoverContent>
</Popover>

FAQ

How is the feedback field set up?

The Textarea has aria-label="Feedback", placeholder="Share your feedback...", and className="min-h-24". It leaves value and onChange unset. PopoverContent is w-80 max-w-full.

How do I close this panel from code?

Submit Feedback closes the panel. Here the panel is controlled: open and onOpenChange on Popover, and the button's handler sets the state to false. The callback gets the next open state first.

What is the heading on the feedback panel?

PopoverHeader wraps PopoverTitle reading Send Feedback and PopoverDescription reading We'd love to hear your thoughts! The textarea and the full-width Submit Feedback button follow.

How does the Feedback button become the trigger?

The trigger is a Button with variant="outline". MessageSquareIcon has aria-hidden="true" and data-icon="inline-start", and the label is Feedback. Pass the button to render on PopoverTrigger, and use PopoverContent as the panel.

What does Submit Feedback do with the text?

Nothing yet: it closes the panel and leaves the text unread. The textarea is uncontrolled and is cleared when the panel closes, so read its value in the submit handler, or control it, to send the feedback. The button is w-full.

How does this panel dismiss?

Escape closes the panel and returns focus to the trigger. A click outside closes it too. The panel sits beside the button, and the rest of the page stays usable.

API Reference

Popover

Sets onOpenChange={setOpen} and open={open}. The rest is on the Popover page.

Button

Sets variant="outline" and onClick={handleSubmit}. The rest is on the Button page.

Textarea

Sets aria-label="Feedback" and placeholder="Share your feedback...". The rest is on the Textarea page.

All 15 popover examples