Ratings Breakdown
The RatingsBreakdown component provides a clear, visual summary of user ratings across multiple categories, such as 1-star to 5-star ratings. It allows developers to easily integrate a customizable ratings breakdown into their application with options for displaying different rating counts and accent colors. The RatingsBreakdownExpandable version offers an expandable view, making it ideal for cases where you want to provide users with a more interactive and detailed experience by showing or hiding additional rating details. Both components enhance the overall user interface by providing structured feedback representation.
Basic Ratings Breakdown
Customer Reviews
3.9 out of 5
5 Stars
4 Stars
3 Stars
2 Stars
1 Stars
41%
29%
12%
18%
0%
1<RatingsBreakdown
2 oneStars={1}
3 twoStars={300}
4 threeStars={200}
5 fourStars={500}
6 fiveStars={700}
7 accentColor="#F8CC38"
8/>Ratings Breakdown API Reference
Prop | Type | Default |
|---|---|---|
asChild | boolean | false |
children | React.ReactNode | - |
title | string | Customer Reviews |
oneStars | number | - |
twoStars | number | - |
threeStars | number | - |
fourStars | number | - |
fiveStars | number | - |
accentColor | string | - |
* Required | ||