Rating

Interactive star rating with hover preview and keyboard navigation for React

Stars fill on hover and commit on click. Arrow keys navigate between ratings. Swap stars for hearts, thumbs, or any Lucide icon. Works controlled or uncontrolled. Includes a read-only mode for displaying existing ratings. Great for reviews, surveys, or any 1-5 scale input.

Rating preview

Scroll to load preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/rating.json

npx shadcn@latest add https://www.shadcn.io/r/rating.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/rating.json

bunx shadcn@latest add https://www.shadcn.io/r/rating.json

Choicebox

Card selection

Pill

Status badges

Animated Tooltip

Hover feedback

FAQ

Was this page helpful?

Menu Dock

Icon-and-label navigation dock with animated underline indicator for React

Credit Card

Credit card display with 3D flip animation and card logos for React

Rating

Rating preview

Installation

Related Components

Choicebox

Pill

Animated Tooltip

FAQ

How do I control the value?

How do I set the star count?

Can I use custom icons?

How do I show read-only ratings?