shadcn.io is not affiliated with official shadcn/ui
Rating Distribution Success Block for React
A confirmation after rating a trail: the average worked out from five counts, your own stars, a five-row distribution with your row outlined, and an optional comment in a disclosure with a textarea and Save.
Installation
Overview
Put a rating in context the moment it is given, with this confirmation page for React with Base UI. It is the Ridgepath Maps page after a hiker rates the Cascade Loop, a whole screen with the page's rails and one band across it. A check in a muted tile, the heading and one sentence sit over a corner-marked card ruled by Guides. Its first band is the average, worked out from the five counts, with the person's own four stars in a read-only Rating. The second is the distribution, five rows from five stars to one with a bar, a count and a share, and the person's row outlined and named in words. The third is an optional comment: a Collapsible opens a Textarea with Save comment. The one primary is the Shine Button Back to the map, pinned to the foot of a phone's screen. For maps, courses, recipes and anywhere a rating is asked for.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was rated. The five counts, the trail and your four stars are typed constants, and Save comment keeps the words in the page only. To wire it, fill the counts from your ratings table with your rating already included, send the comment to your endpoint, and let the person change their rating from this page if your product allows it.
Where do the average and the shares come from?
They are worked out from the five counts and never typed twice. The average is the weighted sum over the total, rounded to a tenth. The shares use the largest remainder method, so the five percentages add up to exactly 100 instead of 99 or 101 after rounding.
How is my row marked without colour?
With an outline in the foreground colour and the words "your rating" in the row's name for assistive technology, plus "Your rating: 4 out of 5" beside the stars. Nothing depends on a hue, so it reads the same in light and dark and in high contrast.
How does the comment disclosure work?
The trigger is a real button that opens and closes the section, and the section is inert while closed so its field is out of the tab order. Opening moves focus into the textarea; saving or closing returns it to the trigger. The page is start-aligned so opening the section grows the card without moving the heading.
Related
- Pro
A full-height confirmation that shows a posted review as it appears: avatar, verified purchase, a read-only four-star rating, title and text, a 24-hour edit that swaps the text for a textarea, and a Copy link button.
- Pro
Rating Breakdown Reviews
Score summariesA review summary for a carry-on suitcase whose star rows filter the reviews: the average, the count, the share that would recommend it and a five-row distribution, beside the four most helpful reviews with a Helpful vote each.
- Pro
One Tap Quick Rating Reviews
Ask and writeA 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.
- Pro
A confirmation that a help-desk ticket is resolved: the ticket and its status, the agent's closing message in a bubble, a five-star rating you can press or move with the arrow keys, and a Reopen ticket button that flips the status.
- Pro
A full-height confirmation after a survey: your 0 to 10 answer shown as an ordered scale with your 9 marked, a reward code with a real copy button, and one line about what the last survey changed.
- Pro
App Rating Dialog
Drawers and popoversA water tracker's Today screen with its rating drawer shown open over a drawn phone: five stars with a word each, then a branch, where four or five stars offers the store and one to three asks what could be better, with topics and a note.