shadcn.io is not affiliated with official shadcn/ui
Social Proof Banner Reviews Block for Radix UI
A score cell beside a vertical ticker of the ten newest ratings, with a pause button, a hold on hover and focus, and a hidden list for screen readers.
Installation
Overview
A social proof banner for React with Radix UI, for Skerrymill, a fictional granola brand. A compact header sits over one band under a rule, split by a divider. At the start is the score worked out from a typed tally of 412 ratings: the average to one decimal, half-star read-only stars and the count. At the end is a vertical ticker of the ten newest ratings, one line each: the reviewer's initials, a small stars row, the first name with a last initial and the first six words of the review. The ticker holds while the pointer is over it, a visible Pause button stops it, and under reduced motion it stands still on its first lines. Screen readers skip the ticker and read the same ten ratings, with dates, as a list. On a phone the ticker sits under the score. It's built from Marquee, Rating, Button and Guides.
FAQ
Where do the score and the six words come from?
The score comes from TALLY (ratings counted by star) and the six words from each rating's body: a small helper takes its first six words and adds an ellipsis, so they can never disagree with the full text in the hidden list. Edit TALLY and LATEST at the top of the file.
How is motion handled?
The ticker is a CSS animation. It pauses on hover and on focus within it, the Pause button toggles it and says whether it is pressed, and with reduced motion the animation is off, the button is hidden and the list stays on its first lines. Nothing here is a timer, and the full ratings are always in the hidden list.
What does a screen reader hear?
The ticker is hidden from assistive technology on purpose: a moving list is hard to follow. A visually hidden list named "The newest 10 ratings" has each line in full, with the date, the first name, the stars as text and the review.