Skip to content

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

Free

Feedback Dialog for React

A feedback dialog with one textarea labeled Your feedback, plus Cancel and Submit Feedback. Empty text can still be submitted.

Send Feedback opens Share your feedback. The only field is Your feedback, with the placeholder Tell us what you think. Cancel and Submit Feedback sit under it. Submit stays on even when the field is empty.

Use it for one comment from anywhere in the app. Disable submit yourself when blank notes are useless. A shorter note can sit in a Popover. In React, Base UI does not send the comment.

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

Dialog anatomy: content, title, description, close, footer

Usage

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>
    Send Feedback
  </DialogTrigger>
  <DialogContent className="sm:max-w-lg">
    <DialogHeader>
      <DialogTitle>Share your feedback</DialogTitle>
      <DialogDescription>
        We&apos;d love to hear your thoughts on how we can improve.
      </DialogDescription>
    </DialogHeader>
    <Field>
      <FieldLabel htmlFor="feedback-feedback">Your feedback</FieldLabel>
      <Textarea
        className="min-h-30"
        id="feedback-feedback"
        name="feedback"
        placeholder="Tell us what you think..."
      />
    </Field>
    <DialogFooter>
      <DialogClose render={<Button variant="outline" />}>Cancel</DialogClose>
      <Button>Submit Feedback</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

FAQ

Should I limit the length?

A maxLength of one or two thousand characters keeps submissions reasonable; show the count in a FieldDescription if you set one.

Should the text be required?

Disable Submit Feedback while the textarea is empty, so people don't send blank feedback by accident.

Should I add categories or a rating?

For routing, a select for Bug, Feature request or Other helps. Keep the form short; the point is that it's quick.

Can people attach screenshots?

Yes, with a file input or the File Upload component. Limit the size and show a preview.

Anonymous or identified?

If people are signed in, attach their account so you can follow up; otherwise offer an optional email.

What happens after submitting?

Close the dialog from your handler and thank people with a toast. Pass open and update it in onOpenChange, which receives the new boolean.

API Reference

Dialog

No extra props in this demo. The rest is on the Dialog page.

Button

Sets variant="outline". The rest is on the Button page.

Field

Sets htmlFor="feedback-feedback". The rest is on the Field page.

Textarea

Sets id="feedback-feedback", name="feedback" and placeholder="Tell us what you think...". The rest is on the Textarea page.

All 17 dialog examples