Star Rating

An animated star rating input with hover preview and sparkle burst effects.

@spectrumui/star-rating

Rate your experience

Hover to preview, click to commit — arrow keys work too

Installation

Usage

import { StarRating } from "@/components/spectrumui/star-rating"

<StarRating showValue onValueChange={(value) => console.log(value)} />

API Reference

StarRating

Renders a radiogroup of star buttons with full arrow-key, Home/End and Space/Enter keyboard support. Pass value to control it from outside, or defaultValue to let it manage its own state. In readOnly mode it renders a static, fraction-capable display.

Prop	Type	Default	Description
`value`	`number`	-	Controlled rating value. Leave undefined for uncontrolled usage
`defaultValue`	`number`	`0`	Initial rating when uncontrolled
`onValueChange`	`(value: number) => void`	-	Fires with the next rating on every commit
`max`	`number`	`5`	Number of stars rendered
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Visual size of the stars (16 / 22 / 28 px icons)
`allowClear`	`boolean`	`true`	Clicking the committed star again clears the rating to 0
`readOnly`	`boolean`	`false`	Display-only mode without hover or click interactivity; supports fractional values like 4.3
`showValue`	`boolean`	`false`	Show a rolling "4/5" value label that tracks the current or previewed rating
`label`	`string`	`"Rating"`	Accessible name of the rating group
`className`	`string`	-	Additional classes merged with the default container styles

Examples

Read-only and sizes

4.3 · based on 1,284 reviews