Everything you need
All features, zero compromise
9 Themes
gold, fire, ocean, neon, rose, mono, violet, sunset, mint — or custom colours.
8 Shapes
star, heart, circle, diamond, thumb, flag, lightning, flower — plus custom SVG.
4 Animations
bounce, pulse, wiggle, pop — click animation that delights users.
Half-star
Hover left for 0.5, right for 1.0. precision prop.
Emoji / Text
Replace icons with any emoji, text, or custom render fn.
Group Rating
Rate multiple categories with auto overall average.
Analytics
NPS, trend, percentPositive, distribution — useRatingAnalytics.
Persistence
useRatingPersistence saves to localStorage with TTL.
Review Wall
RatingWall masonry grid with load-more and helpful voting.
Smart Prompt
RatingPrompt fires on time, scroll depth, or manually.
TypeScript
Full .d.ts — every prop, type, and hook typed.
Accessible
role=slider, ARIA, keyboard ← → Home End, focus ring.
Pick your version
v1 through v5
Core rating — themes, shapes, animations, RTL, useRating hook.
- ✓9 themes + custom
- ✓8 shapes
- ✓4 animations
- ✓Half-star
- ✓Keyboard & ARIA
- ✓RTL
- ✓useRating
Emoji mode, custom SVG icons, mount animation, RatingGroup.
- ✓Emoji characters
- ✓Custom SVG icon
- ✓Mount animation
- ✓RatingGroup
Form integration, tooltip popup, distribution bars, field validation.
- ✓StarRatingInput
- ✓RHF + Zod
- ✓StarRatingTooltip
- ✓RatingDistribution
- ✓useRatingField
Gradient fill, compare mode, confetti, overallLabel.
- ✓filledGradient
- ✓compareValue
- ✓celebrateOnMax
- ✓overallLabel
- ✓dividerColor
10 components, 5 hooks — the most complete rating library for React.
- ✓RatingBadge
- ✓RatingSummary
- ✓RatingWall
- ✓RatingPrompt
- ✓useRatingAnalytics
- ✓useRatingPersistence
- ✓glowEffect · skeleton · undo
Get started in 30 seconds
Install, import, drop in your JSX.
// 1. Install
npm install star-rating-x
// 2. Import CSS once
import "star-rating-x/styles.css";
// 3. Use
import { StarRating } from "star-rating-x";
function ProductPage() {
const [rating, setRating] = useState(0);
return (
<StarRating value={rating} onChange={setRating} theme="gold" />
);
}