v2.2Social Proof

Review Aggregate

Star rating and review count from third-party sources (G2, Capterra, App Store). Renders inline SVG stars (full, half, empty) with locale-formatted review counts.

Read the pattern View source on GitHub

Live preview

Rendered with real component code. Each example demonstrates a documented variant.

Compact

4.8(12,847)on G2

Expanded

4.52,400+ reviewsApp Store

High rating, expanded

4.91,500 reviewsCapterra

React props

Configure the component via props in React or via attributes in HTML.

Prop	Type	Default	Description
rating	number	required	Rating value from 0 to maxRating. Fractional values (e.g. 4.5) render a half star.
maxRating	number	5	Scale ceiling. Controls the total number of stars drawn.
reviewCount	number \| string	required	Number of reviews. Numeric values are auto-formatted with thousands separators. String values are used verbatim.
source	string	undefined	Short attribution label (e.g. "on G2"). Rendered after the review count.
sourceLogo	string	undefined	Optional image src for a third-party platform logo.
style	"compact" \| "expanded"	"compact"	Layout variant. Compact is an inline row; expanded is a badge block.
className	string	undefined	Extra class name appended to the root element.

HTML usage

The HTML variant uses the same shared styles and class names. Drop into any stack.

<link rel="stylesheet" href="path/to/review-aggregate/styles.css">

<!-- Compact (inline row) -->
<div class="rav rav--compact" aria-label="Rated 4.8 out of 5 stars based on 12,847 reviews on G2">
  <div class="rav__stars" aria-hidden="true">
    <span class="rav__star rav__star--full"><!-- star SVG --></span>
    <span class="rav__star rav__star--full"><!-- star SVG --></span>
    <span class="rav__star rav__star--full"><!-- star SVG --></span>
    <span class="rav__star rav__star--full"><!-- star SVG --></span>
    <span class="rav__star rav__star--full"><!-- star SVG --></span>
  </div>
  <span class="rav__rating-value">4.8</span>
  <span class="rav__count">(12,847)</span>
  <span class="rav__source">on G2</span>
</div>

<!-- Expanded (badge block) -->
<div class="rav rav--expanded" aria-label="Rated 4.5 out of 5 stars based on 2,400+ reviews App Store">
  <div class="rav__stars" aria-hidden="true">
    <!-- star spans -->
  </div>
  <span class="rav__rating-value">4.5</span>
  <span class="rav__count">2,400+ reviews</span>
  <span class="rav__source">App Store</span>
</div>

Customization

Override these CSS custom properties to integrate the component into your brand.

.rav {
  --rav-star-color-filled: #f59e0b;
  --rav-star-color-empty: #d1d5db;
  --rav-star-size: 1.125rem;
  --rav-text-color: #111827;
  --rav-muted-color: #6b7280;
  --rav-source-spacing: 0.375rem;
  --rav-gap: 0.25rem;
  --rav-font-size: 0.875rem;
  --rav-rating-font-weight: 600;
  --rav-logo-height: 1.25rem;
  --rav-expanded-padding: 1rem 1.25rem;
  --rav-expanded-radius: 0.5rem;
  --rav-expanded-bg: #ffffff;
  --rav-expanded-border: 1px solid #e5e7eb;
}