Rating
FormsA five-star rating input with hover preview and click to rate.
Ratings capture opinion with a single interaction. Stars fill on hover, and the chosen value is reported to the parent on click.
npx shadcn@latest add ratingBasic usage
Controlled stars with a live score readout.
Preview
LiveScore: 3 / 5
tsx
1const [value, setValue] = useState(3)23<Rating value={value} onValueChange={setValue} />
Custom size and scale
max controls the number of stars; size controls their pixel size.
Preview
Livetsx
1<Rating max={10} size={12} />
With a label
Pair with Label for accessible rating fields.
Preview
Livetsx
1<Label>Rate your experience</Label>2<Rating value={4} />
API reference
All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.
| Prop | Type | Description |
|---|---|---|
| value | number | The controlled rating value. |
| onValueChange | (value: number) => void | Called when a star is clicked. |
| max | number= 5 | The number of stars. |
| size | number= 16 | The pixel size of each star. |
| disabled | boolean= false | Disables rating interaction. |