ComponentsSite blocks

Review score

The summary box of a review article: overall score as points, percent or stars with a word beside it, score bars per criterion, pros and cons, the verdict, the reviewer and the readers' rating. A named <section>; the bars are decorative and every score is also in text. With an item it emits schema.org Review JSON-LD: reviewRating, author, date, reviewBody, pros and cons as positiveNotes / negativeNotes, and the item's aggregateRating.

Server component + JSON-LD blocks/site/review-score.tsx, styles/commerce.csstheme · material · accent · density · font

Our score

Excellent

(312 reviews)

Scores by criterion

  • Sound9.2 (9.2 out of 10)
  • Comfort8.4 (8.4 out of 10)
  • Battery7.8 (7.8 out of 10)
  • Build8.9 (8.9 out of 10)

Pros

  • Warm, detailed mids
  • Folds flat into a slim pouch
  • Thirty hours on one charge

Cons

  • No hard case in the box
  • Touch controls are easy to brush

Verdict

The Arden H2 is the pair to beat under $200: rich sound, light on the head, and a battery that outlasts a long-haul flight.

Reviewed by Mara Ellison

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { ReviewScore } from "@vamos-ui/react/blocks";

<ReviewScore
  score={8.6}
  scoreLabel="Excellent"
  criteria={[{ label: "Sound", score: 9.2 }, { label: "Battery", score: 7.8 }]}
  pros={["Warm, detailed mids"]}
  cons={["No hard case"]}
  verdict="The pair to beat under $200."
  aggregateRating={{ value: 4.4, count: 312 }}
  item={{ name: "Arden H2 wireless headphones", brand: "Arden" }}
/>

Examples

Percent and stars

A book scored 91/100 with an action, a watch scored 4/5 as stars. headingLevel={3} inside an article section.

Field Notes on Clay

A new standard text

Verdict

Clear enough for a first class, deep enough to keep on the studio shelf.

See editions

Atlas field watch

Pros

  • Legible at a glance
  • 100 m water resistance

Cons

  • Strap runs short

API

ReviewScore

PropTypeDefault
score / max
Overall score and scale; criteria use the same scale.
number / number— / 10
display
8.6 / 10, 86%, or five stars.
"points" | "percent" | "stars""points"
title / headingLevel / scoreLabel
Box heading and a word beside the score.
ReactNode / 2 | 3 | 4 / ReactNode“Our score” / 2
criteria
One bar per criterion.
{ label: string; score: number }[]—
pros / cons
Check and minus lists. String items reach the JSON-LD.
ReactNode[]—
verdict / reviewer / datePublished
Bottom line, author, `YYYY-MM-DD`.
ReactNode / { name; url? } / string—
aggregateRating
Readers' rating under the score and in the JSON-LD.
{ value; count; best? }—
item / jsonLd
What was reviewed; JSON-LD is emitted when item is set.
{ name; type?; brand?; image?; url? } / boolean— / true
action
A link or button under the verdict.
ReactNode—
labels / locale / id / className
Strings, number format, anchor id.
Partial<CommerceLabels> / string / string / string—

reviewJsonLd(input)

PropTypeDefault
input
The same fields; returns the Review node for <JsonLd />.
ReviewJsonLdInput—
Previous
Resource calendar
Next
Rich text section