A star rating for reviews, feedback and track ratings: stars fill up to the pointer as a preview (by halves, with `allowHalf`), a click sets the rating and gives the star it lands on a small pop, and clicking the same rating again clears it. The keyboard gets a native range under the stars: arrows, Home and End step through it, number keys jump straight to a rating and Backspace clears. As a read-only display it fills fractionally, so 4.3 fills 30% of the fifth star, and it can write the value and the number of ratings beside the stars ("4.3 (1,284)"). Any icon can replace the star, in amber, the primary color or the foreground.
The import and the props worth knowing about, in one place.
import { ReactionRating } from "@/components/beste/component/reaction-rating";
const [rating, setRating] = useState(0);
<ReactionRating value={rating} onValueChange={setRating} allowHalf label="Rate this album" />
// A review summary: read-only, fractional fill, value and count
<ReactionRating readOnly defaultValue={4.3} showValue count={1284} size="sm" />
// Hearts in the primary color, ten of them
import { Heart } from "lucide-react";
<ReactionRating icon={Heart} max={10} color="primary" tone="outline" />Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Hover | Previews the rating under the pointer; with half steps the left half of a star is a half. |
|---|---|
| Click | Sets the rating. Clicking the current rating again clears it. |
| Arrow keys / Home / End | Step through the rating from the keyboard. |
| 0 to 9 | Jump straight to that many stars. |
| Backspace / Delete | Clear the rating. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Controlled rating, 0 to `max`. |
defaultValue | number | — | Initial rating when uncontrolled. @defaultValue 0 |
onValueChange | (value: number) => void | — | |
max | number | — | Number of stars. @defaultValue 5 |
allowHalf | boolean | — | Allow half stars. @defaultValue false |
clearable | boolean | — | Pressing the current rating again clears it. @defaultValue true |
readOnly | boolean | — | Display only: fractional fill (4.3 fills 30% of the fifth star) and no input. |
showValue | boolean | — | Write the rating beside the stars. |
count | number | — | Number of ratings, written in brackets after the value. |
icon | React.ComponentType<{ className?: string; strokeWidth?: number }> | — | Icon drawn for each star. @defaultValue Star |
color | "amber" | "primary" | "foreground" | "amber" | |
label | string | — | Accessible name. @defaultValue "Rating" |
formatValue | (value: number) => string | — | Formats the written value. Defaults to one decimal when needed. |
locale | string | — | |
name | string | — | |
disabled | boolean | — | |
tone | "muted" | "outline" | "ghost" | "ghost" | |
size | "sm" | "default" | "lg" | "default" | |
className | string | — |