Ratings that feel as good as they look.

Accessible, animated rating components for React: stars, hearts, smileys, numeric scales, thumbs and review summaries. Fractional precision, keyboard and touch, RTL, forms and SSR included.

$ npm install react-advanced-rating

Open the playground View on npm

0 runtime dependencies
6.4 kB min+gzip for Rating
2.2 kB headless hook
TypeScript · ESM + CJS

Try it. Five stars celebrates.

4.0Good

Playground

Tune every prop and copy the code

Every control maps to a real prop. The snippet updates as you change things, and copy gives you exactly what's rendered.

import { useState } from "react";
import { Rating } from "react-advanced-rating";
import "react-advanced-rating/styles.css";

export function ProductRating() {
  const [value, setValue] = useState(3.5);

  return (
    <Rating
      value={value}
      onChange={setValue}
      precision={0.5}
      size={40}
      labels={["Terrible", "Bad", "Okay", "Good", "Excellent"]}
      showLabel
    />
  );
}

Motion

Four motion personalities

Fills cascade with a stagger, commits pop with a spring, and top scores can celebrate. Everything runs on CSS transitions and the Web Animations API: no animation library, and no React re-renders per frame. Users who prefer reduced motion get instant changes.

animation="none"

Instant state changes. For dense tables and dashboards.

animation="subtle"

A quick fade-fill and a light pop. Feels professional.

animation="spring"

The default. Springy hover, a cascading fill and a ripple on commit.

animation="playful"

Bouncy and tilted, with a particle burst on the top score.

Typical

Whole stars only, an instant swap, and nothing to confirm that a choice was registered.

react-advanced-rating

The half-star preview follows the pointer, a tooltip names the value, and a springy pop confirms the choice.

Recipes

Built for real product surfaces

Each example below is live, and you can open its code.

E-commerce

Product card

Sample product

Trail Daypack 22L

4.6(1,284)

$89.00

Forms

Review form with validation

Feedback

Smiley satisfaction

How was your checkout experience?

Docs & support

Was this helpful?

Was this article helpful?

Surveys

1–10 likelihood scale

How likely are you to recommend us to a friend?

Dashboards

Review summary with filters

Customer reviews

1,284 reviews

All reviews · 1,284 total

Exactly as described. Fast delivery.
Sam K.
Great quality, strap could be softer.
Priya R.
Third one I've bought. Love it.
Jonas W.
Zip broke after a month.
Lee M.
Fine for the price.
Ana G.
Fits a 16" laptop with room to spare.
Omar T.
Arrived damaged; refund was quick.
Chen L.
Comfortable on long walks.
Maya B.

i18n

Right-to-left & localised

قيّم تجربتك

Customisation

Any icon you like

heart · rose

emoji

your SVG

render fn

Headless

Build your own with useRating

Spice levelMedium

Quick start

Up and running in three lines

Import the component and the stylesheet once. Works with Vite, Next.js (app & pages router), Remix and CRA.

ReviewStars.tsx

import { useState } from "react";
import { Rating } from "react-advanced-rating";
import "react-advanced-rating/styles.css"; // once, anywhere in your app

export function ReviewStars() {
  const [value, setValue] = useState(0);
  return <Rating value={value} onChange={setValue} precision={0.5} label="Your rating" />;
}

Controlled or uncontrolled. Use value + onChange, or defaultValue.
Server components ready. The bundle ships with "use client".
No styling framework required. Theme with props or CSS variables like --rar-active-color.
Upgrading from 2.x? Old props (rating, editable, starColor…) still work. See the migration guide.

Accessibility

Keyboard, screen readers, and user preferences

Interactive ratings follow the WAI-ARIA slider pattern; read-only ones are announced as a single image with the value in its name.

Keyboard shortcuts
Key	Action
`→ / ↑`	Increase by one step (← in RTL)
`← / ↓`	Decrease by one step (→ in RTL)
`Page Up / Page Down`	Increase / decrease by 1
`Home / End`	Minimum / maximum
`1–9`	Jump to that value
`0, Backspace, Delete`	Clear (when allowClear)

Meaningful announcements. aria-valuetext reads “3.5 out of 5, Good” and is fully customisable for i18n.
Visible focus using an outline that inherits the text colour, plus Windows High Contrast (forced-colors) support.
Reduced motion disables transitions, pops and particles automatically.
Forms. required blocks submit, focuses the control and links the message via aria-describedby.
Touch-friendly. Drag across the icons to scrub; vertical page scrolling still works.
Contrast. The default gold suits decorative use; pick theme="contrast" when state must meet 3:1 non-text contrast on light surfaces.

API

Props at a glance

Full reference, types and recipes are in the README.

Prop	Type	Default	Description
`value / defaultValue`	`number`	`0`	Controlled or initial value. 0 means no rating.
`onChange`	`(value: number) => void`	-	Called on commit; receives 0 when cleared.
`onHoverChange`	`(value: number \| null) => void`	-	Live preview value while hovering or scrubbing.
`max`	`number`	`5`	Number of items (1–100).
`precision`	`number`	`1`	Selectable step: 1, 0.5, 0.25, 0.1 or any value in (0, 1].
`readOnly / disabled`	`boolean`	`false`	Display-only (role=img) or inert slider.
`allowClear`	`boolean`	`true`	Clicking the current value, Backspace or 0 clears it.
`icon / emptyIcon`	`"star" \| "heart" \| "circle" \| "bolt" \| "smiley" \| "number" \| ReactNode \| fn`	`"star"`	Built-ins, any SVG/emoji, or a render function.
`highlight`	`"range" \| "single"`	`"range"`	Fill up to the value, or only the selected item (smileys default to single).
`color`	`string \| string[] \| (value, max) => string`	`theme`	Active colour; arrays and functions create colour scales.
`theme`	`"gold" \| "rose" \| "violet" \| "emerald" \| "ocean" \| "mono" \| "contrast"`	`"gold"`	Built-in palettes.
`size / gap`	`"xs"–"xl" \| number \| CSS length`	`"md"`	Icon size and spacing.
`animation`	`"none" \| "subtle" \| "spring" \| "playful"`	`"spring"`	Motion personality (reduced motion respected).
`celebrate`	`boolean \| "max" \| number`	`playful → max`	Particle burst on selection.
`labels / getLabelText`	`string[] / fn`	-	Words per value and the screen-reader text (i18n).
`label / helperText / error`	`ReactNode`	-	Visible label, description and validation message.
`showLabel / tooltip`	`boolean \| fn`	`false`	Show the current label next to or above the icons.
`name / required / form`	`string / boolean`	-	Native form integration and validation.
`dir`	`"ltr" \| "rtl"`	`inherited`	Right-to-left support; auto-detected from the DOM.

Also exported: useRating, ThumbsRating, RatingSummary, computeRatingStats and the icon components (StarIcon, HeartIcon, FaceIcon…).