shadcn.io is not affiliated with official shadcn/ui
Feedback Request Notification Block for React Aria
A writing app's feedback card drawn over its drafts page: five stars, a question that follows the rating, a thank-you that stays on the page, and a memory in the tab so it asks once and Ask again brings it back.
Installation
Overview
Ask how it went without making a page of it, with this feedback request for React with React Aria. A compact header holds the title and Ask again; below it a hairline frame shows a drawn writing app (a top bar, a list of drafts and a page of text in greys), and over its foot end a card asks "How did writing go today?". The card has a five-star Rating whose stars are named, such as "3 of 5, Okay", and a Textarea that stays in place, disabled until a rating is chosen, whose question follows the stars: "What went wrong?" up to three, "What worked well?" from four. Send answer is the one Shine Button and swaps the card for a thank-you that says the answer stays on the page, with Edit answer; Maybe later is a ghost Button. It asks once: the choice is remembered in this browser tab, so a reload doesn't ask again, and Ask again clears the memory and brings the card back. It's built from Rating, Textarea, Field, Shine Button, Button and Guides, with CSS motion only. For any app that asks for a rating after a task.
FAQ
How does it ask only once?
The block remembers the choice for the tab with sessionStorage, read once after the page loads: after Send answer it stores the rating, after Maybe later, Close or Escape it stores that you put it off, and from then on the card stays away until Ask again clears the key. A line under the frame says what is remembered. If the browser blocks storage the card still works and the choice lives in the page until a reload. Nothing pops up on a timer: the card is the preview's open state, and in your app you show it when your own rule says so.
How does the question follow the rating?
promptOf(stars) returns the label: "Anything to add?" before a rating, "What went wrong?" for one to three stars and "What worked well?" from four. The field is always there, so choosing a rating never moves the buttons; it only enables the field and changes its label. Send answer stays quiet until a rating is chosen, and pressing it then says to choose one and moves focus to the stars.
How do the stars work with the keyboard?
Tab reaches the stars, and the arrow keys move along them and set the rating; each star is named with its number and word. The word beside the stars says the rating in text, and the status line reads the new rating and the question that follows.
What stays local, and how do I make it real?
The rating and the comment are never sent: Send answer stores the rating in the tab and shows the thank-you. In your app, post the rating and comment to your API in the submit handler, show an error in the status line if it fails and only then remember the answer; store the memory where it matches your rule (a tab, a device, or the account).
What do Close, Escape and Maybe later do?
All three close the card, remember that you put it off and move focus to Ask again, the one control that brings it back. After an answer, Close and Escape only close the thank-you, keeping the rating. Ask again is quiet while the card is showing and says so if pressed.