Selection
Rating
The hover preview is the entire interaction design: you see the score you are about to give before you give it, so the control is forgiving without needing a confirm step. Underneath it is a single slider-role element rather than five separate buttons, which means the arrow keys work and a screen reader announces one value instead of reading out five unrelated stars. Clicking the current score clears it, because otherwise a one-star rating can never be undone.
npx shadcn@latest add @minflow/ratingWhere to use it
- Feedback, reviews, and quality scores - anywhere the answer is a small integer and precision does not matter.
- Read-only, to display an aggregate score next to a name or a result.
- Not for anything where the difference between adjacent values is meaningful - that is a slider or a number field.
Variations
Interactive
The default. Hover previews, click commits, clicking the same value again clears it, and the arrow keys move by one.
Read-only
Displaying a score somebody else gave. It stops being a control entirely - no hover, no focus, and it announces as an image with a value.
With the number
Where the exact figure matters as much as the shape, such as an aggregate that sits between whole stars.