shadcn.io is not affiliated with official shadcn/ui
Page Feedback Footer Block for React
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 Base UI 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.
Related
- Pro
Reading Progress Footer
Sitemaps and trailsA footer for a team handbook with a reading-path progress track that follows the real scroll, a count of chapters read, the next chapter as a link, and two link columns.
- Pro
Documentation Footer
Sitemaps and trailsA documentation footer for a router library's docs: previous and next page cells, an Edit this page link with a pencil, four link groups and a legal band.
- Pro
Contact Form Footer
Company and placesA contact-form footer for a hosting company: three short link groups on one half of a split, and on the other a compact message form in a card in card that checks itself and confirms in place.
- Pro
Support Hub Footer
Company and placesA support-hub footer for a help-desk product: a question and a row of help links, then three support channels as cells, live chat with an online status, email with its reply time and phone with its hours, each one link.
- Pro
Breadcrumb Footer
Sitemaps and trailsA breadcrumb footer for a CI service's docs: a trail band ending on the current page, three link groups in hairline columns and a foot band with the wordmark and policies.
- Pro
Digest Chooser Newsletter Footer
Newsletter sign-upA newsletter footer for a developer digest: two link groups on one half of a split, and on the other a real sign-up that lets the visitor tick the digests they want, checks the address and confirms in place.