Display Only
Show a rating without interaction
3.5 / 5
<stars-rating rating="3.5" half></stars-rating>
Interactive Mode
Click stars to set the rating
<stars-rating manual></stars-rating>
Half-Star Rating
Allow half-star precision
<stars-rating manual half></stars-rating>
With Reset Button
Include a reset button to clear the rating
<stars-rating manual reset></stars-rating>
Custom Stars
Use custom characters and 10-star scale
<stars-rating numstars="10" rating="7" star="♥"></stars-rating>
Custom Styling
Customize colors and sizes with CSS properties
stars-rating {
--stars-rating-size: 40px;
--stars-rating-color: #8b5cf6;
--stars-rating-empty-color: #ddd6fe;
}