Rating Summary Breakdown React component
A ratings summary that explains the score: big average with stars, an all-time / last 90 days switch, clickable 5-to-1 star bars, a would-recommend ring with verified share, a 12-month trend line, attribute scores, a two-ended scale, topic chips with positive and negative counts and matching review snippets.
About the Rating Summary Breakdown component
Rating Summary Breakdown answers the questions behind a star average: how the ratings are spread, whether people would recommend it, if it's getting better or worse, and what specifically they like or complain about.
Clicking a star bar or a topic chip filters the snippets beside them, and the All time / Last 90 days switch redraws everything for recent buyers, which matters when a product has been improved.
When to use it
Put it at the top of the reviews section on a product page, above the full review list, and pass the same filters to that list through onFilter.
It works best from about a few dozen ratings up; with only a handful, a simple average and the reviews themselves are clearer.
Installation
Add the Rating Summary Breakdown component to your project with the shadcn CLI. It lands in components/rating-summary-breakdown.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/rating-summary-breakdownOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeCollections
Use-case pages that compare Rating Summary Breakdown with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Rating Summary Breakdown FAQ
- Where does the average come from?
- From counts: each star level times its count, divided by the total, rounded to one decimal. Pass counts in 5, 4, 3, 2, 1 order.
- What do the topic chips show?
- How many reviews mention the topic positively and negatively, from whatever analysis you run. Clicking one filters the snippets to reviews tagged with that topic.
- What's the two-ended scale for?
- One attribute where both ends matter, such as fit (runs small to runs large) or noise cancelling (light to strong). value is where the product sits from 0 to 1.
- How does filtering work with my review list?
- onFilter fires with the selected stars, topic and period whenever they change, so you can load or filter your full list to match. The built-in snippets are filtered the same way.
- Is it accessible?
- The score has a text equivalent, star bars are toggle buttons named with stars, count and percentage, the ring and trend have descriptive labels, topics use aria-pressed and the filter summary is announced politely.
