shadcn.io is not affiliated with official shadcn/ui
Rating Distribution Success Block for Vue
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 Vue with Ark 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.