Rating
Star rating component with half-star support, read-only mode, custom icons, and hover preview
Rating
Display star-style ratings with different icons, sizes, variants, half precision, counts, custom maximums, and interactive callbacks.
Basic ratings
Use the value prop to show a rating from 0 to max (default 5). Enable showValue to render the numeric value alongside.
Basic display
Sizes
Control icon size with the size prop. Useful for compact table displays or prominent hero ratings.
Size options
Variants
Align the rating with your design system using the variant prop, including glass and gradient effects.
Color & style variants
Precision
Use precision="full" for whole icons, or "half" for half-step ratings like 4.5.
Half-star ratings
Icons
Change the visual appearance of the rating via the icon prop. Built-in options include star, heart, circle and diamond.
Different icons
Interactive rating
Use onChange to capture user ratings. Use precision to control step size.
Click & hover to rate
Read-only & disabled
Show non-interactive ratings with readOnly, and completely disable the component using disabled.
Static ratings
Custom max
Change the scale using max. You can still render the numeric value using showValue.
Out of 10, out of 3
Custom colors
Use color to override the icon color while still benefiting from the component’s hover and interaction behavior.
Brand & custom colors
Real-world usage
Combine ratings with rich UI for product cards and review forms.
Product & review flows
Wireless Headphones
Premium noise-canceling headphones
Write a Review
Usage Guidelines
When to Use
- Product ratings
- Feedback collection
- Review displays
Accessibility
- Current value announced
- Read-only state indicated
Performance
- CSS-based stars
- Efficient hover preview
Common Mistakes
- No feedback on selection
- Too many stars (use 5)
Frequently Asked Questions
Related Components
View allCollapsible content sections with single/multiple expansion modes, animation, and keyboard navigation
User avatar with image loading, fallback text generation, status indicators, and shape variants
Stacked avatar display with overflow handling, max count configuration, and hover expansion
Status indicator with variant system, dot mode, positioning, and pulsing animation support