Skip to content
Altitude Standalone Components

Review Overview

Review Overview Component

The Review Overview component displays a summary of product reviews, including average rating, total count, and a breakdown of ratings by score.

Example

Customer Reviews

(4.2)
42 Reviews
5
20
4
15
3
5
2
1
1
1

Usage

import ReviewOverview from "@altitude/ui/react/components/review-overview";


export default function ProductPage() {
  const reviewData = {
    averageRating: 4.2,
    reviewCount: 42,
    ratings: {
      5: 20,
      4: 15,
      3: 5,
      2: 1,
      1: 1,
    },
  };


  const handleCreateReview = () => {
    // Open review form or navigate to review creation page
    console.log("Create review clicked");
  };


  return (
    <div className="product-page">
      <h1>Product Name</h1>
      <div className="product-details">{/* Product details here */}</div>
      <div className="reviews-section">
        <ReviewOverview
          averageRating={reviewData.averageRating}
          reviewCount={reviewData.reviewCount}
          ratings={reviewData.ratings}
          onCreate={handleCreateReview}
        />
      </div>
    </div>
  );
}

Props

PropTypeRequiredDescription
averageRatingnumberNoAverage rating value (default: 2.5)
reviewCountnumberNoTotal number of reviews (default: 1)
maxRatingnumberNoMaximum possible rating value (default: 5)
minRatingnumberNoMinimum possible rating value (default: 1)
ratingsobjectNoObject mapping rating values to counts (e.g., {5: 10, 4: 5})
onCreatefunctionNoCallback function when “Create Review” button is clicked

Features

  • Displays average rating with star visualization
  • Shows total review count
  • Visualizes rating distribution with progress bars
  • Includes optional “Create Review” button
  • Fully responsive layout
  • Customizable rating range