Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

Pros and Cons Reviews Block for React

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.

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

Pros and cons aggregated from reviews, for React with Base UI, for the Ravenmoor Sweep 3, a fictional robot vacuum. A compact header says the points were counted by hand from 86 reviews. A two-part bar under a rule with + marks shows how the mentions divide (61 of pros, 24 of cons, with shares that add up to 100), and a centre divider splits two columns: Pros with a plus icon and Cons with a minus icon, each point showing how many of the 86 reviews mention it, a bar scaled to the most mentioned point and a Collapsible that reads one supporting quote. On a phone the columns stack, Pros first. It's built from Collapsible and Guides. The tallies are example data.

FAQ

How do I change the points?

Edit PROS and CONS and REVIEWS at the top of the file. Each point has a label, a count and a quote with its reviewer and date. The totals in the header line, the shares of the two-part bar (by the largest remainder method, so they add to 100) and each bar's length are worked out from the counts.

Are the counts real?

No. The product, the 86 reviews and every count are invented example data. The block shows the layout; do the counting for your own reviews, by hand or with your own tooling, and type the result in.

What do the bars measure?

Each point's bar is its mention count against the most mentioned point on either side, so the longest bar is the point mentioned most. Pros are drawn in the full text colour and Cons in a lighter weight; the icon and the word say which side a point is on, so nothing rests on colour.

How does Read a quote work?

Each point's link is a Collapsible trigger: it opens one quote with the reviewer's name and a fixed date, and its aria-expanded follows it. Nothing is fetched.

Does it work right to left?

Yes. Bars fill from the start, the divider and its marks are on the start side of the Cons column, the quote's rule is on the start side and each figure is isolated in a bdi.

  • Pro

    Detailed Card Reviews

    Cards and walls

    One review with everything it can carry in a card in card: the reviewer and purchase facts, five criteria scores, pros and cons, three drawn pictures, a Helpful vote and the seller's reply.

  • 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

    Tagged Categories Reviews

    Filter and search

    A tag sidebar for plant-subscription reviews: eight tags with counts and frequency bars as toggles, an all-or-any Switch, a live count, and reviews that carry their tags as pills.

  • 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

    Typed Summary Reviews

    Insights and trends

    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.

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

All 100 reviews blocks