FormsAnimated
Rating
Star rating input with hover preview and a pop cascade.
A rating collects or displays a score, like product reviews or feedback. Hovering previews the score, and choosing one pops the stars up to it in a quick cascade. It is a proper radio group, and has a read-only mode for showing averages.
Preview
4.0 · 1,284 reviews
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/rating.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/rating.
Builds on: motion
Usage
import { Rating } from "@/components/ui/rating";
<Rating defaultValue={4} label="Rate this template" />Motion
How it moves
Chosen stars pop with a slight twist in a 40ms cascade (GSAP cue-snap).
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Rating
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | number | 0 | Controlled or initial score. |
| onValueChange | (value: number) => void | — | Called when a star is chosen. |
| max | number | 5 | Number of stars. |
| readOnly | boolean | false | Display only (role=img with a text label). |
| size | "sm" | "md" | "lg" | "md" | Star size. |
Accessibility
- Interactive ratings are a radiogroup with arrow-key navigation.
- Read-only ratings read as "Rating: 4 out of 5".
FAQ
Also searched as: react star rating · rating component · review stars · shadcn rating · 5 star rating input