Shadcn.io is not affiliated with official shadcn/ui
Rating
Interactive star rating with hover preview, keyboard nav, and custom icons for React
Stars that fill on hover, commit on click. Arrow keys navigate between ratings (Shift+Arrow jumps to min/max). Swap stars for hearts, thumbs, or any Lucide icon via the icon prop. Works controlled (value/onValueChange) or uncontrolled (defaultValue). Read-only mode for displaying existing ratings. role="radiogroup" keeps screen readers happy. Great for reviews, surveys, or any 1-5 scale input.
Scroll to load preview
Installation
Related Components
FAQ
Was this page helpful?
Sign in to leave feedback.