Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

Typed Summary Reviews Block for React

A hand-written, labelled summary of 36 earbud reviews: two sentences that each end in a count opening a popover of three snippets, the average rating and five themes with mention counts.

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 summary of reviews for React with Base UI, for the Stoatfold Buds, a fictional pair of true-wireless earbuds. The summary is typed, not generated, and says so: a Summary badge sits beside "Summary of 36 reviews". Under a rule with + marks, a divider splits the band. At the start, two sentences each end in a count ("24 reviews", "9 reviews") that opens a popover with three of the snippets behind it, followed by the average rating worked out from the typed tally. At the end, five themes as a list with how many reviews mention each and a bar in the text colour. On a phone the themes sit under the summary. It's built from Popover, Badge, Rating and Guides. The reviews and counts are example data.

FAQ

Is the summary generated?

No. Both sentences, the snippets and the counts are typed in the file and labelled as a summary; the block shows no confidence figure and claims no automated analysis. If you generate summaries yourself, put the result into PRAISE, COMPLAINT and the two sentences, and keep the label that says what it is.

Where do the numbers come from?

THEMES holds each theme's mention count; the sentences read their counts from it (mentionsOf), so a sentence and its theme row can't disagree. The average and the stars come from TALLY, the typed count of reviews per star rating, by whole-number maths.

How do the count popovers work?

Each count is a button. Press it with the mouse, Enter or Space and a popover lists three snippets with their reviewers and star ratings; Escape closes it and puts focus back on the count. The button's name says what it opens ("24 reviews: read three of them about battery life").

What do the theme bars show?

Each bar is the theme's mention count against the most mentioned theme, in the text colour; the same figure is written beside it ("24 of 36 reviews"). A review can mention several themes, so the counts don't add up to 36.

Does it work right to left?

Yes. The divider is on the start side, bars fill from the start and counts are isolated so their digits stay in order.

  • Pro

    Pros and Cons Reviews

    Insights and trends

    Pros and cons gathered from 86 reviews of a robot vacuum: a two-part bar of the mentions, two columns of points with how many reviews mention each, and one supporting quote per point.

  • Pro

    Keyword Mentions Reviews

    Insights and trends

    A topic table for sofa reviews: mentions found by keywords, a share bar and the average rating of the reviews that mention each topic against the overall average, sortable, with the matching reviews under it.

  • Pro

    Highlighted Phrases Reviews

    Filter and search

    Three reading-lamp reviews with hand-picked phrases marked by a plus or minus glyph, and a phrase index of toggles with counts that makes only the chosen kinds of phrase stand out.

  • Pro

    Sentiment Badges Reviews

    Filter and search

    Six meal-delivery reviews each marked with a tone badge from a printed rule, with a drawn shape and a word, and a chip filter by tone with counts.

  • Pro

    Weighted Category Ratings Reviews

    Criteria and compare

    Five criteria as ruled rows with a bar, a score and a signed change against the previous quarter, and a Select that weighs them for everyday, commuting or gym use and re-derives the overall score.

  • Pro

    Rating Breakdown Reviews

    Score summaries

    A review summary for a carry-on suitcase whose star rows filter the reviews: the average, the count, the share that would recommend it and a five-row distribution, beside the four most helpful reviews with a Helpful vote each.

All 100 reviews blocks