Build interactive, animated, accessible, and user-friendly feedback loops with our Shadcn Rating components, built using React, Tailwind CSS, Radix UI, and Base UI. Simple, highly customizable, and easy to configure for modern web applications.
A modular rating selection system that easily captures star ratings, interactive 3D emojis, or numeric scales to capture user reviews, customer satisfaction, or Net Promoter Scores (NPS).
Shadcn Rating is an advanced feedback layout system composed of customizable rating inputs and interaction wrappers. It provides robust keyboard navigation, custom icon scaling, half-star selection support, and animated interactive states.
Whether you're creating a post-checkout satisfaction rating, a detailed product review form, a NPS feedback survey, or a quick reaction collector, Shadcn Rating provides fluid animations and easy-to-use props out of the box.
Rating components are commonly used for:
Handling precise pointer locations (like half-star detection), custom hover animations, and accessibility requirements like keyboard arrow selection and focus trapping manually is incredibly complex. The Rating component abstracts all of this, offering native-feeling performance alongside standard desktop compatibility.
By utilizing Radix UI and Base UI primitives, it grants full control over rating thresholds, range options, custom icons, and transition styles with zero heavy bundle overhead.
The Rating layout elements work smoothly with other Shadcn UI components in your application:
Use the readOnly prop to display static average ratings or testimonials where interaction is not required.
When setting up custom rating layouts:
size="lg" to make rating icons highly visible on mobile.sonner) to instantly confirm user actions.You can easily integrate it into any Next.js or React setup. All components are fully client-side safe and automatically handle pointer coordinates, keyboard listeners, and resize events cleanly.
max prop. This lets you configure the rating range to match your specific feedback requirements.ArrowRight/ArrowUp keys to increase the value, ArrowLeft/ArrowDown keys to decrease it, and the Home/End keys to jump instantly to the minimum or maximum values.value and onValueChange props, as well as uncontrolled mode using the defaultValue prop.readOnly or disabled props. This disables hover effects and interactions, prevents keyboard focus, and sets correct ARIA attributes, making it perfect for displaying average ratings or survey summaries.Our Shadcn Rating components are open-source and free to use. Easily copy the code, customize the elements, and integrate them into your personal or commercial projects.