Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

Expert Bench Test Reviews Block for Svelte

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 Svelte with Ark 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.

All 100 reviews blocks