The average rating as a big number with stars and review total, beside five bars that fill in on mount.
Loved at Fernhill
npx shadcn@latest add https://hyperblur.dev/r/rating-summary.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/rating-summary.tsx.
import { RatingSummary } from "@/components/hyperblur/rating-summary"
<RatingSummary counts={{ 5: 1700, 4: 420, 3: 100, 2: 50, 1: 40 }} />| Prop | Type | Default | Description |
|---|---|---|---|
| counts | { 5: number; 4: number; 3: number; 2: number; 1: number } | number[] | sample counts | Review counts per star level. An array is read from five stars down to one star. |
| color | string | "#f5b301" | Color of the stars and bar fills. |
| showPercent | boolean | true | Show a percentage at the end of each bar. When false the raw count is shown. |