Rating

Stars that preview on hover, fill smoothly and pop in a cascade when you pick one. Half stars and keyboard included.

Inputs

Great

Playground

Tweak the props, the preview and the code follow.

Props

size

max5

icon

allowHalf

readOnly

disabled

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

<Rating defaultValue={3} size="lg" />

npx @plumsydev/plum-ui add rating

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

<Rating defaultValue={4} />

out of 5· hover the left half of a star

A read-only summary next to an interactive rating.

4.6

2,184 reviews

Prop	Type	Default
`value` Controlled value.	`number`	`—`
`defaultValue` Initial value when uncontrolled.	`number`	`0`
`onValueChange` Clicking the current value resets to 0.	`(value: number) => void`	`—`
`max` Number of stars.	`number`	`5`
`allowHalf` Pick halves by pointing at the left side of a star.	`boolean`	`false`
`readOnly` Display only, accepts fractional values.	`boolean`	`false`
`size` Star size.	`"sm" \| "default" \| "lg"`	`"default"`
`icon` Replace the star with any icon.	`(className: string) => ReactNode`	`—`

Behaves like a slider for assistive tech: arrow keys step, Home and End jump to the ends.