Rating Overview shows an aggregate rating summary with a distribution bar and configurable label placement.
Loading demo: rating-overview-real-world
npx sdaia-ui@latest add rating-overview
import { RatingOverview } from "@/components/ui/rating-overview"<RatingOverview labelPlacement="top-left" />The default rating overview with top-left label placement.
Loading demo: rating-overview-default
Stacked rating overview displaying a full breakdown of scores per star level.
Loading demo: rating-overview-stacked
Props for the RatingOverview component.
Prop | Type | Default | Required |
|---|---|---|---|
value | number | 3.5 | optional |
max | number | 5 | optional |
label | ReactNode | - | optional |
labelPlacement | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'start' | 'end' | 'top-left' | optional |
stacked | boolean | false | optional |
showHelperText | boolean | true | optional |
helperText | string | "123 ratings" | optional |
starStyle | 'solid' | 'outline' | 'solid' | optional |
direction | 'ltr' | 'rtl' | 'ltr' | optional |
starSize | number | 24 | optional |