Rating
Rating displays a star-based scoring component with solid and outline styles, brand coloring, and multiple size options.
<Rating value={4.9} max={5} readOnly brand size="xl" />Installation
npx sdaia-ui@latest add rating
Usage
import { Rating } from "@/components/ui/rating"<Rating value={value} onValueChange={setValue} />Examples
Default
The default rating component with solid stars in medium size.
const [value, setValue] = useState(3.5); <Rating value={value} onValueChange={setValue} />Outline
Star rating with outlined (unfilled) star shapes.
<Rating style="outline" value={value} onValueChange={setValue} />Solid
Star rating with solid filled star shapes.
<Rating style="solid" value={value} onValueChange={setValue} />Brand
Star rating with brand colours applied.
<Rating brand={true | false}/>Sizes
Rating stars available in sizes from 2xSmall to 2xLarge.
<Rating size="2xs" defaultValue={3.5} /><Rating size="sm" defaultValue={3.5} /><Rating size="md" defaultValue={3.5} /><Rating size="lg" defaultValue={3.5} /><Rating size="2xl" defaultValue={3.5} />API Reference
RatingProps
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 |