Skip to content

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

Free

Feedback Popover for Ark UI

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, Ark 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>
  <PopoverTrigger asChild>
    <Button variant="outline">
      <MessageSquareIcon aria-hidden="true" data-icon="inline-start" />
      Feedback
    </Button>
  </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..."
    />
    <PopoverClose asChild>
      <Button className="w-full">Submit Feedback</Button>
    </PopoverClose>
  </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 each button sits in PopoverClose, which closes the panel without any state. To close it from your own code, control the open state on Popover. Pass open and onOpenChange on Popover. The callback gets { open }.

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. Set asChild on PopoverTrigger and pass that one button. PopoverContent is 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 asChild. The rest is on the Popover page.

Button

Sets variant="outline". 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