App Rating Dialog Block for React

So you can see it without a click. On load the drawer is a copy drawn in place at the foot of the drawn phone: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Rate button in the header opens the real Drawer, modal, with its grabber and swipe to close, Escape, and focus return, and the copy stays closed until a reload. Both show the same RateFields component and share the block's state, so a rating tapped in the copy is there in the real one. In your app keep the Drawer and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

branchOf reads the stars: four or five is glad, one to three is better, none is the starting hint. The three panels sit in one grid cell and the two that are not shown are inert and invisible, so the drawer never changes height as the branch changes, and what was typed in the feedback panel stays if someone taps another star and back. Change the threshold in branchOf if your bar for asking for a store rating is higher.

Here Rate on the store and Send feedback only change local state: the drawn card says the rating was thanked or the feedback kept, and a polite status message says that nothing opened and nothing was sent. Not now sets the card to Asking again later. In your app open the store's own review prompt or listing from submit for the glad branch, post the stars, topics and note to your server for the other, and store when you last asked, so Not now means a week and a rating means never again.

The rating is a group named by a hidden legend, and each star is named in words ("4 of 5, Great"), so a number alone is never the whole message. The arrow keys move between stars and the word under them is a polite live region inside the drawer, so it is read out in the modal too. The stars are the foreground colour and are never the only sign: the word is always there, and "Choose 1 to 5 stars" before a choice.

Yes. The real drawer is named by its title and described by its sentence, focus stays inside until it closes, and Escape and Not now return focus to Rate Sipmark. The trigger is passed to DrawerTrigger through render, and the drawer is controlled with open and onOpenChange; React Aria's drawer is the same one Base UI uses. The copy shown on load moves no focus; Escape inside it and Not now close it and put focus on Rate Sipmark.

The copy shown on load docks to the foot of the frame at the phone's width, and on a phone it runs edge to edge, with its actions pinned at the bottom and Rate on the store or Send feedback above Not now, while the stars and the branch scroll above them. The real drawer is the Drawer's own bottom sheet, which is what a phone gets anyway.