Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

Avatar Stack Reviews Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A reviewer avatar stack for React with Base 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. The trigger is a button rendered by Base UI's preview card, and the press handler opens it on touch screens only.

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.

Does it work right to left?

Yes. The stack overlaps from the start side and the card stars fill from the start; figures are isolated so the digits stay in order.

  • Pro

    Avatar Stack Testimonials

    Logos and faces

    A centred statement: one customer quote above a stack of team avatars that is a button, fanning open a roster of six teams in one hairline band, each with a name, a role and a one-line verdict.

  • Pro

    Compact Stars Reviews

    Score summaries

    The 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.

  • Pro

    Social Proof Banner Reviews

    Score summaries

    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.

  • Pro

    Sidebar Summary Reviews

    Score summaries

    The review summary that lives in a product page's sidebar, shown at its real 20rem width beside a greyscale sketch of the page: score, five mini bars, the most mentioned words, the latest review and a link to all of them.

  • Pro

    Centered Logo Cloud Hero

    Logos and social proof

    A compact centered hero for a planning tool: an announcement link, two calls to action and a trusted-by band across the column of eight customer wordmarks in cells that share their hairlines.

  • Pro

    Guestbook Customer Wall

    Customers

    A customer wall as a guestbook: five dated notes from shop owners, newest first, beside a framed form that adds your note to the top of the list for this visit.

All 100 reviews blocks