A rating that previews half stars under the pointer and commits with a fill sweep from left to right, a springy pop and a burst of sparks from the chosen star. A rolling caption names the score.
How was your stay?
Casa Verde, Lisbon · 3 nights
npx shadcn@latest add https://hyperblur.dev/r/micro-half-star-rating.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-half-star-rating.tsx.
import { MicroHalfStarRating } from "@/components/hyperblur/micro-half-star-rating"
<MicroHalfStarRating defaultValue={4.5} onChange={(v) => saveReview(v)} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | Controlled rating in halves. Pair with onChange. | |
| defaultValue | number | 3.5 | Initial rating when uncontrolled. |
| max | number | 5 | Number of stars. |
| size | number | 30 | Star size in pixels. |
| accent | string | "#ffb547" | Star fill and spark color. |
| labels | string[] | ["Terrible", ... "Outstanding"] | Captions spread across the scale, one per half step by default. |
| showValue | boolean | true | Show the number and caption next to the stars. |
| readOnly | boolean | false | Display only, no hover or input. |
| label | string | "Rating" | Accessible name of the slider. |
| onChange | (value: number) => void | Called with the committed rating. | |
| className / style / ...rest | HTMLAttributes<HTMLDivElement> | Forwarded to the root element. |