Commerce block

Rating Distribution Summary

Average rating with a clickable histogram — because a 4.3 of forties and fives is a different product from a 4.3 of ones and fives.

126 lineslucide-reactAdded 8 Aug 2026Updated 2 Sept 2026

reviews
rating
histogram
stars
product

What's included

components/product-review-summary.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add product-review-summary

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

4.5/5

218 reviews

94% would recommend

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/product-review-summary.tsx

/**
 * <ProductReviewSummary> — average rating and a distribution histogram.
 *
 * The distribution is the point. An average of 4.3 made of forties and
 * fives is a different product from a 4.3 made of ones and fives, and the
 * bar chart is the only way a customer can tell them apart at a glance.
 *
 * Each bar is a real link to the filtered review list — a histogram you
 * cannot click is a picture of information rather than a way in.
 *
 * The bars are `aria-hidden` and the same data is exposed as a plain list
 * to assistive tech: five bars of varying width announce as nothing useful,
 * where "5 stars, 148 reviews, 68 percent" does.
 *
 * Server component.
 */

import * as React from 'react'
import { Star } from 'lucide-react'

export interface ProductReviewSummaryProps {
  /** Count of reviews at each star level, index 0 = 1 star. */
  distribution?: [number, number, number, number, number]
  recommendPercent?: number
  className?: string
}

const DEFAULT_DISTRIBUTION: [number, number, number, number, number] = [3, 5, 14, 48, 148]

export function ProductReviewSummary({
  distribution = DEFAULT_DISTRIBUTION,
  recommendPercent = 94,
  className = '',
}: ProductReviewSummaryProps) {
  const total = distribution.reduce((n, count) => n + count, 0)

  // Weighted mean. Guarded against a product with no reviews yet, where
  // the naive version divides by zero and renders "NaN out of 5".
  const average =
    total === 0
      ? 0
      : distribution.reduce((sum, count, i) => sum + count * (i + 1), 0) / total

  return (
    <section
      className={`rounded-2xl border border-border/60 bg-card/60 p-6 ${className}`}
    >
      <div className="grid gap-6 sm:grid-cols-[auto_1fr] sm:gap-10">
        {/* Headline */}
        <div className="text-center sm:text-start">
          <p className="text-4xl font-extrabold tracking-tight">
            {average.toFixed(1)}
            <span className="text-lg font-medium text-muted-foreground">/5</span>
          </p>

          <div className="mt-1.5 flex justify-center gap-0.5 sm:justify-start">
            {Array.from({ length: 5 }, (_, i) => (
              <Star
                key={i}
                aria-hidden
                className={
                  i < Math.round(average)
                    ? 'h-4 w-4 fill-amber-400 text-amber-400'
                    : 'h-4 w-4 text-muted-foreground/30'
                }
              />
            ))}
          </div>

          <p className="mt-2 text-sm text-muted-foreground">
            {total.toLocaleString('en-GB')} {total === 1 ? 'review' : 'reviews'}
          </p>

          {recommendPercent ? (
            <p className="mt-1 text-sm font-medium text-emerald-600 dark:text-emerald-400">
              {recommendPercent}% would recommend
            </p>
          ) : null}
        </div>

        {/* Histogram — decorative; the real data is the list below. */}
        <div aria-hidden className="space-y-1.5">
          {[5, 4, 3, 2, 1].map((stars) => {
            const count = distribution[stars - 1]
            const percent = total === 0 ? 0 : (count / total) * 100

            return (
              <a
                key={stars}
                href={`#reviews?rating=${stars}`}
                className="group flex items-center gap-3 text-sm"
              >
                <span className="w-10 shrink-0 text-muted-foreground">{stars} ★</span>

                <span className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
                  <span
                    className="block h-full rounded-full bg-amber-400 transition-all group-hover:bg-amber-500 border border-transparent"
                    style={{ width: `${percent}%` }}
                  />
                </span>

                <span className="min-w-10 shrink-0 text-end tabular-nums text-muted-foreground">
                  {count}
                </span>
              </a>
            )
          })}
        </div>
      </div>

      {/* The same figures, as something a screen reader can actually use. */}
      <ul className="sr-only">
        {[5, 4, 3, 2, 1].map((stars) => {
          const count = distribution[stars - 1]
          const percent = total === 0 ? 0 : Math.round((count / total) * 100)
          return (
            <li key={stars}>
              {stars} stars: {count} reviews, {percent} percent
            </li>
          )
        })}
      </ul>
    </section>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/product-review-summary.tsx and import it where you need the section:

import { ProductReviewSummary } from '@/components/product-review-summary'

Customize

1 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`distribution`Count of reviews at each star level, index 0 = 1 star.	`[number, number, number, number, number]`	`DEFAULT_DISTRIBUTION`
`recommendPercent`	`number`	`94`
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

product-review-summary.html

<!--
  Rating Distribution Summary — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block has no interactive behaviour, so nothing is missing.
-->
<section class="rounded-2xl border border-border/60 bg-card/60 p-6 ">
  <div class="grid gap-6 sm:grid-cols-[auto_1fr] sm:gap-10">
    <div class="text-center sm:text-start">
      <p class="text-4xl font-extrabold tracking-tight">4.5<span class="text-lg font-medium text-muted-foreground">/5</span></p>
      <div class="mt-1.5 flex justify-center gap-0.5 sm:justify-start">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-4 w-4 fill-amber-400 text-amber-400" aria-hidden="true">
          <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-4 w-4 fill-amber-400 text-amber-400" aria-hidden="true">
          <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-4 w-4 fill-amber-400 text-amber-400" aria-hidden="true">
          <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-4 w-4 fill-amber-400 text-amber-400" aria-hidden="true">
          <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-4 w-4 fill-amber-400 text-amber-400" aria-hidden="true">
          <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
        </svg>
      </div>
      <p class="mt-2 text-sm text-muted-foreground">218 reviews</p>
      <p class="mt-1 text-sm font-medium text-emerald-600 dark:text-emerald-400">94% would recommend</p>
    </div>
    <div aria-hidden="true" class="space-y-1.5">
      <a href="#reviews?rating=5" class="group flex items-center gap-3 text-sm">
        <span class="w-10 shrink-0 text-muted-foreground">5 ★</span>
        <span class="h-2 flex-1 overflow-hidden rounded-full bg-muted">
          <span class="block h-full rounded-full bg-amber-400 transition-all group-hover:bg-amber-500 border border-transparent" style="width:67.88990825688074%"></span>
        </span>
        <span class="min-w-10 shrink-0 text-end tabular-nums text-muted-foreground">148</span>
      </a>
      <a href="#reviews?rating=4" class="group flex items-center gap-3 text-sm">
        <span class="w-10 shrink-0 text-muted-foreground">4 ★</span>
        <span class="h-2 flex-1 overflow-hidden rounded-full bg-muted">
          <span class="block h-full rounded-full bg-amber-400 transition-all group-hover:bg-amber-500 border border-transparent" style="width:22.018348623853214%"></span>
        </span>
        <span class="min-w-10 shrink-0 text-end tabular-nums text-muted-foreground">48</span>
      </a>
      <a href="#reviews?rating=3" class="group flex items-center gap-3 text-sm">
        <span class="w-10 shrink-0 text-muted-foreground">3 ★</span>
        <span class="h-2 flex-1 overflow-hidden rounded-full bg-muted">
          <span class="block h-full rounded-full bg-amber-400 transition-all group-hover:bg-amber-500 border border-transparent" style="width:6.422018348623854%"></span>
        </span>
        <span class="min-w-10 shrink-0 text-end tabular-nums text-muted-foreground">14</span>
      </a>
      <a href="#reviews?rating=2" class="group flex items-center gap-3 text-sm">
        <span class="w-10 shrink-0 text-muted-foreground">2 ★</span>
        <span class="h-2 flex-1 overflow-hidden rounded-full bg-muted">
          <span class="block h-full rounded-full bg-amber-400 transition-all group-hover:bg-amber-500 border border-transparent" style="width:2.293577981651376%"></span>
        </span>
        <span class="min-w-10 shrink-0 text-end tabular-nums text-muted-foreground">5</span>
      </a>
      <a href="#reviews?rating=1" class="group flex items-center gap-3 text-sm">
        <span class="w-10 shrink-0 text-muted-foreground">1 ★</span>
        <span class="h-2 flex-1 overflow-hidden rounded-full bg-muted">
          <span class="block h-full rounded-full bg-amber-400 transition-all group-hover:bg-amber-500 border border-transparent" style="width:1.3761467889908259%"></span>
        </span>
        <span class="min-w-10 shrink-0 text-end tabular-nums text-muted-foreground">3</span>
      </a>
    </div>
  </div>
  <ul class="sr-only">
    <li>5 stars: 148 reviews, 68 percent</li>
    <li>4 stars: 48 reviews, 22 percent</li>
    <li>3 stars: 14 reviews, 6 percent</li>
    <li>2 stars: 5 reviews, 2 percent</li>
    <li>1 stars: 3 reviews, 1 percent</li>
  </ul>
</section>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Product Detail6 blocks

Want the whole screen instead of this one section? Open a page and copy it entire.

6 more blocks in Product Detail

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Product Detail

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Product Detail blocks

View category

Product Image Gallery

Main image with a thumbnail strip built as a real tablist, so arrow keys work and the ratio is fixed to stop the buy box shifting.

Product Detail119 lines1 dep11 Sept

Variant & Add-to-Cart Box

Price, variant radiogroup, quantity stepper and add-to-bag — with sold-out sizes disabled and visible rather than hidden.

Product Detail347 lines1 dep10 Sept

Description

A midweight crew neck knitted from extra-fine merino, with a clean set-in sleeve and ribbed trims that hold their shape through a season of wear.

Cut slightly relaxed through the body so it layers over a shirt without pulling. Fully fashioned, which means the panels are knitted to shape rather than cut from a sheet — it costs more to make and it does not lose its line at the shoulder.

Materials & care

Knitted in Scotland from mulesing-free merino.

Composition: 100% extra-fine merino wool
Weight: 19.5 micron, 12gg
Care: Hand wash cold, dry flat
Origin: Made in Scotland

Delivery

Standard delivery is free on orders over £50 and arrives in 2–4 working days. Next-day is £6.95 if you order before 2pm.

Standard: 2–4 working days · free over £50
Next day: Order before 2pm · £6.95
International: 5–10 working days · from £12

Returns

Thirty days from delivery, free, in any condition you would accept yourself. Print the label from your order page or hand it to any collection point.

Sale items included — we have never understood shops that exclude them.

Product Details Accordion

Description, materials, delivery and returns in named <details> elements — no JavaScript, and the copy stays indexable while collapsed.

Product Detail156 lines1 dep2 Sept

Size guide — Heavyweight Oxford Shirt

Measurements are of the body, not the garment.

CentimetresInches

The model is 1.78m and wears a medium.

9 in 10 buyers kept their usual size. The 1 in 10 who exchanged went up, not down.

Body measurements by size, in centimetres.
Size	Chest (cm)Around the fullest part, under the arms, tape level and not pulled tight.	Waist (cm)Around the narrowest part, usually just above the navel.	Sleeve (cm)From the centre back of the neck, over the shoulder, to the wrist.
XS	81–86	66–71	61
S	86–91	71–76	63
Mworn by the model	96–101	81–86	64
L	106–111	91–96	66
XL	116–121	101–106	67
XXL	126–131	111–116	69

Between two sizes on chest and waist? This shirt is cut straight, so take the larger — that is what the exchanges above did.

Size Guide

The panel that decides whether the parcel comes back: what the model is wearing and what previous buyers did, above a table whose inches are converted rather than maintained twice.

Product Detail227 lines1 dep11 Sept

Specification

The numbers that decide it

A forty-row spec table is a place to hide the three figures someone is actually comparing. These are pulled out; the full table is still below for the person who wants it.

Weight1.24 kg with the battery, which is the only way anyone carries it.
Battery18 hours of mixed use, measured at 150 nits rather than at minimum brightness.
PortsTwo USB-C, one HDMI, one headphone. No dongle in the box and none needed.
RepairabilityBattery and SSD are user-replaceable. Parts and the manual are public.

Product Spec Split

The specification table beside the product image, with the two or three figures that decide the purchase pulled out of it.

Product Detail159 linesNo deps

Back In Stock Form

The capture that replaces a dead sold-out button, with the honest caveat that a notification is not a reservation.

Product Detail177 linesNo deps