shadcn.io is not affiliated with official shadcn/ui
One Tap Quick Rating Reviews Block for React
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 Base UI, 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.
Related
- Pro
Inline Rating Widget Reviews
Ask and writeRate in place in a list of recipes: each ruled row shows its community average and a Rate button that opens a popover with named stars, an optional line and Save; after saving, the row shows your stars with Edit.
- Pro
In-App Request Prompt Reviews
Ask and writeA review request drawn as a phone notification for a candle maker: five named stars, a Remind me select (tomorrow, in 3 days, next week) and Not now, each answering in a polite line that keeps the choice.
- Pro
Full Write Form Reviews
Ask and writeThe whole review form on one page for a cast-iron pan: a named star rating, a title and text with live counts, pro and con tag lists, a recommend choice, photo names, and a sticky checklist with a progress bar.
- Pro
Docked Widget Collection Reviews
Ask and writeA docked review widget on a drawn product page for a baby monitor: a tab that folds open to two named star ratings, one line of text, an optional photo name and a progress bar, with the three steps for embedding it beside it.
- Pro
With Rating Testimonials
Collect a reviewOne large customer quote over a closing band you can rate in: choose stars and the average and the rating count change on the spot, with a note that nothing is saved.
- Pro
Summary Header Reviews
Score summariesThe header of a product's reviews page: the product name, a Write a review button that opens a real form in a dialog, and a three-cell band with the score, the share that recommend it and five distribution rows.