shadcn.io is not affiliated with official shadcn/ui
Page Feedback Footer Block for React Aria
A footer that asks whether the page was helpful: a Yes and No toggle that opens a note form with validation, a status line that thanks the reader, and two link columns.
Installation
Overview
A documentation footer for React with React Aria that asks "Was this page helpful?". Three ruled bands. The first holds the question with a Yes and a No toggle (press the pressed one again to take it back); choosing one opens a collapsible with a note field and a Send feedback button. A Yes note is optional; a No needs at least ten characters about what was missing, checked as you leave the field and again on submit, which moves focus to the problem. Sending folds the form away and a status line says "Thanks, that helps." The second band is the brand and two link groups in the nav labelled Footer; the third is the legal row. Nothing is sent anywhere: one comment in the submit handler marks where your backend goes.
FAQ
Where does the feedback go?
Nowhere yet. The submit handler holds a comment where you send rating ("up" or "down") and note to your backend; until then the block keeps them in memory and shows the thanks. That is why the thanks says nothing about what happens to the note.
How does the form check the note?
A Yes needs nothing. A No needs at least ten characters, so the answer says something. An empty No shows "Tell us what was missing so we can fix it", a short one "Add a little more". The field checks when you leave it with something typed, corrects itself as you edit, and submitting with a problem moves focus to the field. The error is text beside an icon, wired to the field with aria-describedby.
How do screen readers hear the result?
The thanks line is a status region that is on the page from the start and filled only after a send, then it takes focus, so it is read once. Changing your mind (pressing Yes or No again) reopens the form with your note kept.