Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

Expert Bench Test Reviews Block for React

A lab's bench test of an espresso grinder: a framed Scorecard and Method tab strip, a table of five measured tests with pass marks, and a verdict with stars, a pass count and a pull quote.

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

An expert's review for React with Base UI, of the Eavesgate Burr 40, a fictional espresso grinder, by a fictional lab, Quillbench. The scorecard comes first: a framed panel under a Scorecard and Method tab strip, with + marks on the frame's corners. The Scorecard tab is a real table of five measured tests (grind consistency, noise, warm-up, retention and dial range) with what was measured, the pass mark and the result as an icon and a word. The Method tab is plain prose on how the three units were tested, in the same height. At the end, the verdict: the lab's score in read-only stars, how many tests passed and how many were marginal (counted from the table) and one pull quote with its attribution. The measurements are example data. It's built from Tabs, Frame, Badge, Rating and Guides.

FAQ

How do I change the tests?

Edit TESTS at the top of the file: each has a name, what was measured, a pass mark written out and a result of pass, marginal or fail. The header line and the verdict count the passes from that list, so they never disagree with the table. VERDICT is the lab's own score, typed, and METHOD holds the three paragraphs of the Method tab.

Are the measurements real?

No. The grinder, the lab and every figure are invented example data for this block; replace them with your own tests.

Why doesn't the frame change size between tabs?

Both panels are also drawn unseen in the same grid cell, so the cell keeps the height of the taller one and the page never moves when you switch. The unseen copies are hidden from assistive technology and the keyboard.

How is a result shown without colour?

As an icon (a check, a minus or a cross) and the word Pass, Marginal or Fail, in the same weight for all three. The table has a caption and column headers, and each test name is a row header.

What happens to the table on a phone?

The Pass mark column folds away and the mark appears under the test's name ("Pass mark: Under 14%"), so the table fits without sideways scrolling and nothing is lost.

Why does the verdict come after the scorecard?

The page order follows the reading order: the tests first, then what the lab made of them. On a phone the verdict sits under the table, and the header line already states the score and the pass count.

  • Pro

    Long-Form Review

    Cards and walls

    A customer's six-month review of a keyboard as four chapters beside a sticky chapter index, with inline Pro and Con markers, a reading time worked out from the words and a verdict band.

  • 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

    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

    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

    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

    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.

All 100 reviews blocks