Rating Overview
Rating Overview shows an aggregate rating summary with a distribution bar and configurable label placement.
Loading preview…
1
<RatingOverview value={3.5} max={5} stacked showHelperText helperText="123 ratings" />Installation
npx sdaia-ui@latest add rating-overview
Usage
import { RatingOverview } from "@/components/ui/rating-overview"<RatingOverview labelPlacement="top-left" />Examples
Default
The default rating overview with top-left label placement.
Loading preview…
1
<RatingOverview2
value={3.5}3
stacked={false}4
labelPlacement="top-left"5
label="Ratings"Stacked
Stacked rating overview displaying a full breakdown of scores per star level.
Loading preview…
1
<RatingOverview stacked showHelperText helperText="123 ratings" value={3.5} />API Reference
RatingOverviewProps
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 |