Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

Weighted Category Ratings Reviews Block for React

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.

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 category ratings block for React with Base UI, for the Dunnockfield Vesper, a fictional pair of wireless headphones. A compact header has a Select at its end that weighs the five criteria for Everyday, Commuting or Gym listening; under it, a band with the overall score as a rolling figure beside read-only stars, the weights written out as text, and five ruled rows. Each row names a criterion, draws a bar from its score out of five with a tick where the previous quarter stood, and gives the score and the signed change against that quarter. Choosing a preset re-weights the overall score and every row's weight while the rows stay where they are, and a polite line says the result. Every score, change and overall is worked out from the twenty typed reviews at the top of the file. It's built from Select, Rating, Sliding Number and Guides.

FAQ

Where do the scores come from?

From the REVIEWS array: each review has a quarter and one score from 1 to 5 per criterion. A criterion's score is the average over the twelve reviews of the latest quarter, to one decimal; its change is that score minus the average of the eight reviews before it, so the sign always matches the numbers on screen. Add reviews and every figure follows.

How does the overall score get weighed?

Each preset in PRESETS gives a weight per criterion, and the weights add up to ten. The overall is the sum of each shown score times its weight, divided by ten, rounded to one decimal, so you can check it by hand from the rows. The weights are written under the score and in each row.

How does the Select differ between libraries?

The Select takes items, and each SelectItem a value.

How is the trend shown without colour?

By an arrow, a sign and a word: a rising score has an up arrow and a plus, a falling one a down arrow and a true minus, an unchanged one a dash and no sign. Screen readers hear "up 0.2 on Q2", "down 0.2 on Q2" or "unchanged on Q2". Nothing is green or red.

How does it fit on a phone?

The Select spans the width under the header's sentence. Each row stacks: the name and its weight with the score and change at the end, then the bar across the full width. The overall score and the stars stay on one line, and nothing scrolls sideways at 320 pixels.

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

  • Pro

    Generation Benchmark Compare Reviews

    Criteria and compare

    A running watch scored against its own previous generation in a sortable table: Gen 1 and Gen 2 scores each over a thin bar, the signed change with an arrow, and header buttons that sort by criterion or by biggest change.

  • Pro

    Accordion Detailed Breakdown Reviews

    Criteria and compare

    Four areas of an e-bike as accordion rows from rail to rail, each with a bar, a score and a signed change against the previous quarter, opening into three scored parts, under a sentence that names the strongest and the weakest.

  • Pro

    Criterion Picker Multi-Criteria Reviews

    Criteria and compare

    Reviews that each score five criteria, with a picker that sorts the list by one criterion and shows every criterion's average, and the five scores of each review drawn as dots.

  • Pro

    Radar Criteria Spider Reviews

    Criteria and compare

    A hand-built radar of six criteria with a toggle that lays one reviewer group, commuters or racers, over everyone, a description list of the scores and an unseen table for screen readers.

  • Pro

    Aggregate Score Reviews

    Score summaries

    A review score with its sum shown: a large rolling figure with stars beside a list of the arithmetic, and a two-way switch between a simple average and one that counts unverified ratings at half.

All 100 reviews blocks