Rating

Interactive star rating component for collecting user feedback and displaying ratings

Basic Rating

Simple star ratings with different values

Show Code

Rating Sizes

Different sizes for various contexts

Show Code

Rating Shapes

Different mask shapes for ratings

Show Code

Half Star Rating

Ratings with half-star precision

Show Code

Product Reviews

Real-world usage in product review contexts

Show Code

Usage Notes

  • Use readonly ratings for displaying existing ratings or reviews
  • Half-star ratings provide more precise feedback collection
  • Different mask shapes (star, heart) can match your brand aesthetic
  • Consider the context when choosing rating scales (1-5 vs 1-10)
  • Provide clear labels or descriptions for what the rating represents
  • Use appropriate sizes based on the UI context and importance