shadcn.io is not affiliated with official shadcn/ui
Avatar Stack Reviews Block for Ark UI
A 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.
Installation
Overview
A reviewer avatar stack for React with Ark UI, for Rookfold, a fictional knitting kit shop. A centred header says the average and the count, and one band under a rule with + marks holds a stack of the six newest reviewers as initials, a round "+34" link for the rest, and the score beside them: the average to one decimal, half-star read-only stars and "Based on 40 reviews". Every face is a button: hover, focus or press it and a card shows that reviewer's stars with their value in words, the review title, their name, a "Verified purchase" mark in words and the date. The count, the average and the "+34" are all worked out from a typed tally of 40 reviews and the six that are shown. On a phone the stack and the score sit one over the other. It's built from Hover Card, Rating, Button styles and Guides.
FAQ
Where do 40 and +34 come from?
TALLY at the top of the file counts the reviews at each star rating; the total and the average come from it. LATEST holds the six newest reviews, and the link counts the rest: total minus six. Change either list and the header, the score and the link follow.
How do I open a card with a keyboard or a finger?
Tab to a face and the card opens on focus; Escape closes it. A press on a touch screen opens it too, because a phone has no hover. A pointer opens it after a short delay.
Why initials and not photos?
The reviewers are invented, so there are no photos; each face shows initials in a round button. The button's name says who it is and what they gave ("Imogen Teague, 5 out of 5: My first jumper"), so a screen reader hears the review summary without opening the card.