Star Rating
Free
Stars that fill in a stagger on hover, pop on click and follow the arrow keys.
Customize
5
32px
Read only
#ffc24a
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/star-rating.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/star-rating.tsx.
Usage
import { StarRating } from "@/components/ui/star-rating";
<StarRating name="rating" defaultValue={4} onChange={setRating} />Props
11 properties| Property | Type | Default | Description |
|---|---|---|---|
| value | number | — | Controlled rating. Leave it out to let the stars manage themselves. |
| defaultValue | number | 0 | Starting rating when uncontrolled. |
| onChange | (value: number) => void | — | Called with the new rating. |
| max | number | 5 | Number of stars. |
| size | number | 28 | Star size in pixels. |
| color | string | "#ffc24a" | Fill color of the stars. |
| readOnly | boolean | false | Display only. Accepts fractions, like 4.5. |
| label | string | "Rating" | Accessible name of the star group. |
| name | string | — | Form field name. Submits the rating through a hidden input. |
| id | string | — | Id of the star group. |
| className | string | — | Extra classes for the group. |
Dependencies: motion