shadcn.io is not affiliated with official shadcn/ui
With Rating Testimonials Block for React Aria
One 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.
Installation
Overview
Social proof you can touch. A single large quote for Hushline, a fictional community moderation tool, leads, and the block closes on a band of two cells split by a divider, its rule and + marks drawn on the page rails. The first cell asks "How would you rate us?" with five stars the visitor can really choose; the second shows the average, worked out from the ratings already given plus the visitor's own, so picking five stars nudges it up and picking one nudges it down, with the digits rolling to the new value. Choosing again replaces the visitor's rating instead of adding a second one, "Remove my rating" takes it back, and a plain note says the rating is not saved. The stars stay in the text colour, so the block has no primary colour and no button. On a phone the two cells stack. It's built from Rating, Sliding Number, Avatar, Button and the Guides lines, with CSS transitions only and your theme's tokens. For landing pages, docs and feedback sections that want a small, honest interaction next to a quote.
FAQ
How do I change the starting ratings?
Edit BASE at the top of the file: how many ratings there are and the sum of their stars. The average is derived from those two numbers by integer maths, rounded to hundredths, so 205 stars over 46 ratings reads 4.46. Only use real numbers.
Where does the visitor's rating go?
Nowhere: it lives in component state for the visit, and the block says so. To keep it, send the value from choose to your own endpoint and use the response to set the starting numbers on the server. Until you do, leave the "not saved" note in place so the page never claims otherwise.
Why does the average only move a little?
It is the real mean of everyone's stars, so one new rating among 46 moves it by a few hundredths. Showing two decimals makes that change visible; the number never goes outside what the data allows.
How does it work with a keyboard and a screen reader?
The stars are a group of radio buttons named "How would you rate us?": arrow keys move between them, and Space chooses. After every change a polite status line says what you chose, and "Remove my rating" returns focus to the first star. The average is read as plain text, for example "4.47".