On This Page
Rating
Premium rating indicator supporting custom shapes (Stars, Hearts, Thumbs, Flames, Trophies), half-star precision, color themes, breakdown cards, and reviews.
When to use
star ratingProduct reviews, app store ratings, item reviews with fractional precisionheart ratingMarking items as favorites, wishlists, and popularity feedbackflame / streakActivity streaks, hot trending topics, and gamification rewardstrophy ratingAchievements, difficulty tiers, skill badges, and challenge levelsreview breakdownCustomer testimonial sections with distribution percentage barsread-only modeAggregated historical feedback stats where direct user input is disabledInteractive Playground
Live CanvasInteractive
4.5 / 5
1. Half-Star Precision Rating
4.5 / 5
component.tsx
1
2. E-Commerce Review Rating Breakdown
4.8out of 5
2,849verified ratings
5
78%
4
15%
3
4%
2
2%
1
1%
component.tsx
1
3. Verified Customer Review Card
Alexander VanceVerified
2 days agoExceptional quality and finish
The attention to detail and build quality exceeded expectations. Seamless integration with our design system!
component.tsx
1
4. Flame Streak & Gamification Rating
5 / 5
component.tsx
1
Page 1 of 2
API Reference (Props)
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Controlled active rating score count. |
| defaultValue | number | 0 | Default rating value for uncontrolled usage. |
| max | number | 5 | Maximum scoring slots count. |
| onChange | (value: number) => void | — | Callback fired when a rating icon is selected. |
| variant | "amber" | "primary" | "emerald" | "rose" | "cyan" | "amber" | Color theme and glow appearance. |
| icon | "star" | "heart" | "thumb" | "flame" | "trophy" | "smile" | "star" | Selection symbol rendering variant. |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Visual dimensions of the rating icons. |
| allowHalf | boolean | false | Enables fractional half-point rating precision (0.5). |
| showScore | boolean | false | Displays score badge alongside icons. |
| tooltips | string[] | — | Array of text labels shown on hover corresponding to each score. |
| readonly | boolean | false | Disables pointer event hooks and transforms to display-only. |
| className | string | — | Additional custom class names. |
Accessibility (a11y)
- Keyboard Focus: Focusable using standard Tab navigation. Use arrow keys Right Arrow / Left Arrow to increment or decrement rating values.
- Screen Reader Compliance: Implements WAI-ARIA slider role with dynamic
aria-valuenow,aria-valuemin, andaria-valuemax.