Rating

Stars or bolts that flicker on as you hover, with half steps.

Built on Icons.

How was your order?

Flat white, oat · Halden Street Roasters

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/rating.json

import { Rating } from "@/components/ui/rating"

<Rating label="Your rating" defaultValue={4} />

With allowHalf, the left half of an icon picks the half value and the arrow keys move by 0.5.

Read-only ratings show fractional values exactly and are announced as an image.

Also accepts native div attributes, and the ref points at the icon row. className and style go to the icon row.

Prop	Type	Default
`value`	`number` Controlled value, from 0 (unrated) to max.	None
`defaultValue`	`number` Initial value when uncontrolled.	`0`
`onValueChange`	`(value: number) => void` Called on click or key press. Clicking the current value sends 0.	None
`max`	`number` Number of icons.	`5`
`allowHalf`	`boolean` Half values from the pointer and in 0.5 keyboard steps.	`false`
`icon`	`"star" \| "bolt" \| "heart"` The icon shape.	`"star"`
`readOnly`	`boolean` Display only. Not focusable, announced as an image with the value.	`false`
`disabled`	`boolean` Dims the icons and ignores input.	`false`
`label`	`ReactNode` Visible label above the icons. Names the control.	None
`formatValue`	`(value: number, max: number) => string` Text read to screen readers for the value.	`"3.5 of 5"`
`onHoverChange`	`(value: number \| null) => void` The previewed value while the pointer is over the icons, then null.	None
`name`	`string` Submits the value with a surrounding form.	None
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	inherited
`size`	`"sm" \| "md" \| "lg"` Icon size: 16, 24 or 32px.	`"md"`
`containerClassName`	`string` Classes for the outer block when a label is set.	None

With name, a form reset puts back the starting rating.
The icon row is a role="slider" with aria-valuetext such as "3.5 of 5", or "No rating" at 0.
Right and Up raise the value, Left and Down lower it, Home clears and End sets the maximum. Number keys jump straight to a value.
Without a visible label, pass aria-label.
Newly lit icons flicker on in sequence. With reduced motion they switch on without the flicker.