Interactive star rating with hover preview, half steps and keyboard control.
“Warm light, zero glare. My desk finally feels calm.”
npx shadcn@latest add https://hyperblur.dev/r/star-rating.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/star-rating.tsx.
import { StarRating } from "@/components/hyperblur/star-rating"
<StarRating defaultValue={3.5} precision={0.5} onChange={(v) => console.log(v)} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | Controlled value. Pair with onChange. | |
| defaultValue | number | 0 | Initial value when uncontrolled. |
| onChange | (value: number) => void | Called when the value changes. | |
| max | number | 5 | Number of stars. |
| precision | 1 | 0.5 | 1 | Step size. 0.5 enables half stars. |
| size | number | 24 | Star size in pixels. |
| color | string | "#f5b301" | Fill color. |
| readOnly | boolean | false | Display only: no hover, click or keyboard input. |