shadcn.io is not affiliated with official shadcn/ui
With Rating Testimonials Block for React
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".
Related
- Pro
Top Rated Testimonials
Ratings and reviewsFour reviews of an operations app with a sort control in the header: most helpful, highest rated or newest, re-ordered live from typed numbers, in one band of ruled rows with a status line and an average.
- Pro
Rating Breakdown Testimonials
Ratings and reviewsA review summary whose histogram rows are filter buttons: press a star row and the featured reviews narrow to that rating, with a live count and an empty state.
- Pro
Star Distribution Testimonials
Ratings and reviewsA vertical column histogram of one-to-five star reviews in one framed figure whose cells share hairlines: the score and a plain-words verdict, one owner's quote, and the chart with the value above each column and a dashed average marker. A Shine Button in the header links to the reviews.
- Pro
Verified Buyer Testimonials
Ratings and reviewsOne focal review under a Verified purchase badge in a raised card inside a tinted shell, a divider and a receipt of what the customer bought, then a band of three compact reviews with the same badge.
- Pro
Centered Star Rating Hero
TestimonialsA showcase centered hero led by its review score, with five stars and the average, a Shine Button, review-site badges and three reviews below in cells whose hairlines overshoot their corners.
- Pro
Inset Star Rating Big CTA
Social proofA card-in-card call to action built on a rating summary: a headline and a Shine Button over a band with a big score and foreground stars beside a five-to-one star histogram, all figures worked out from the counts.