shadcn.io is not affiliated with official shadcn/ui
One Tap Quick Rating Reviews Block for React Aria
A one-tap star rating for a phone case: the tap rates at once, the product's average is worked out again with yours counted in, Undo takes it back, and Add a comment opens a text box with a real check.
Installation
Overview
A one-tap rating for React with React Aria, for the Ottercase Slimshell, a fictional phone case. A centred header sits over one narrow framed panel with a + mark on each corner. Five stars, each named ("4 of 5, Very good"): the tap rates at once and says "Thanks. 4 stars, Very good." in a polite line, and the line under it works the product's average out again with your rating counted in, one more rating than before (from 38 ratings to 39, and 4.29 to 4.31 after a five). Pressing another star changes the rating; Undo takes it back and puts focus on the stars. After a tap, "Add a comment" folds open a text box under the buttons: Send comment refuses an empty or very short comment with the reason under the field, and a good one is kept with a line that says nothing was sent. It's built from Rating, Field, Textarea, Frame, Guides and Button, with your theme's tokens for every colour. There is no primary button: the tap is the action.
FAQ
Where do the average and the count come from?
COUNT (38 ratings) and GIVEN (the stars they gave, 163) at the top of the file. Your rating adds one to the count and its stars to the total, and the average to two decimals is worked out again by whole-number maths: 4.29 before, 4.31 after a 5, 4.21 after a 1. Nothing else on the page is typed.
Is the rating or the comment sent anywhere?
No. The rating is local state and the line says "Nothing is sent"; the comment is kept on the page with "nothing was sent in this demo". To keep them, post mine and comment to your own endpoint where submit says so, and where rate is called.
How does it work from the keyboard?
Tab to the stars and use the arrow keys: each press rates (so a visitor moves through the values on the way), and the polite line says the current one. Undo clears it and puts focus back on the stars. "Add a comment" opens the box and moves focus into it; Close the comment folds it away.