Rating displays a star-based scoring component with solid and outline styles, brand coloring, and multiple size options.
Loading demo: rating-real-world
npx sdaia-ui@latest add rating
import { Rating } from "@/components/ui/rating"<Rating value={value} onValueChange={setValue} />The default rating component with solid stars in medium size.
Loading demo: rating-default
Star rating with outlined (unfilled) star shapes.
Loading demo: rating-outline
Star rating with solid filled star shapes.
Loading demo: rating-solid
Star rating with brand colours applied.
Loading demo: rating-brand
Rating stars available in sizes from 2xSmall to 2xLarge.
Loading demo: rating-sizes
Props for the Rating component.
Prop | Type | Default | Required |
|---|---|---|---|
value | number | - | optional |
defaultValue | number | 0 | optional |
max | number | 5 | optional |
size | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' | optional |
style | 'solid' | 'outline' | 'solid' | optional |
brand | boolean | true | optional |
step | 0.5 | 1 | 0.5 | optional |
direction | 'ltr' | 'rtl' | 'ltr' | optional |
disabled | boolean | false | optional |
readOnly | boolean | false | optional |
hoverable | boolean | true | optional |
starColor | string | - | optional |
emptyStarColor | string | - | optional |
onValueChange | (value: number) => void | - | optional |