Skip to content

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

Free

Feedback Dialog for Solid

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

UI library: Ark UI

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 Solid, Ark UI does not send the comment.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Dialog>
    <DialogTrigger asChild={props => <Button {...props()} variant="outline">Send Feedback</Button>} />
    <DialogContent class="sm:max-w-lg">
      <DialogHeader>
        <DialogTitle>Share your feedback</DialogTitle>
        <DialogDescription>
          We&apos

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 { open }.

API Reference

Dialog

Sets asChild and props. The rest is on the Dialog page.

Button

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

All 17 dialog examples