Rating Input

New

A star rating with hover preview, optional half steps and a quick pop wave on select. Arrow keys change it, and read only mode shows partial fills.

motionlucide-reactutils@soultel/use-reduced-motion-safe

How was your delivery?

Order #4812 from Acme Bakery

Average, read only

4.6

From 1,284 reviews

Half steps

Custom icon

Installation

$ pnpm dlx shadcn@latest add @soultel/rating-input

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/rating-input.json works too.

Manual installation

1. Install the dependencies.
terminal1 lines
```
npm install motion lucide-react
```
2. Copy the source from the Code tab into components/rating-input.tsx.

Usage

example.tsx11 lines

import { RatingInput } from "@/components/rating-input"

export function Review() {
  return (
    <RatingInput
      label="How was your order?"
      labels={["Terrible", "Bad", "Okay", "Good", "Great"]}
      onValueChange={(stars) => saveRating(stars)}
    />
  )
}

Props

Prop	Type	Default	Description
value / defaultValue	number	0	Controlled or initial rating. 0 means none.
onValueChange	(value: number) => void	-	Called when the rating changes.
max	number	5	Number of icons.
allowHalf	boolean	false	Half steps, picked from the left or right half of an icon.
readOnly	boolean	false	Display only. Fractions like 4.3 fill partially.
clearable	boolean	true	Clicking the current value clears it.
icon	LucideIcon	Star	Any lucide icon, like Heart.
labels	string[]	-	One word per step, shown beside the icons.
size	number	24	Icon size in px.