shadcn.io is not affiliated with official shadcn/ui
Social Proof Banner Reviews Block for React
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 Base 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.
Related
- Pro
Avatar Stack Reviews
Score summariesA slim band of the six newest reviewers as a stack of initials that open a card of their review, a +34 link for the rest, and the score and count worked out from a typed tally.
- Pro
Compact Stars Reviews
Score summariesThe smallest rating line, 4.6 (38), in a card title, a list row and a comparison table, each one a button whose hover card shows the five-row split behind the figures.
- 123Pro
Numbered Social Proof Banner
Numbered listsA leaderboard banner for an open-source tool: the top three contributors this week as a framed, ranked list on shared hairlines, each cell one link with an initials avatar and a merged count.
- Pro
Vertical Marquee Testimonials
Walls and lanesA ruled wall of notes from home cooks: up to three lanes drifting up, down and up inside a hairline band, with a pause button, the one Shine Button, and a pause on hover and focus.
- Pro
Dual Row Marquee Testimonials Hero
TestimonialsA compact centered hero for a support inbox with a Shine Button and, on its own rule below, two rows of short customer reviews that scroll in opposite directions, with a button to pause them.
- Pro
Rating Card Widget Reviews
Score summariesAn embeddable rating card with a Compact, Standard and Wide switch that reshapes the same figures, and a field with the matching embed snippet and a Copy button.