Atelier UI

Search components…

Search components…

Star Rating

Star rating control with hover preview and keyboard support.

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

StarRatingProps

Also accepts all props of Omit<React.ComponentProps<"div">, "onChange" | "defaultValue">

PropTypeDefaultDescription
valuenumber——
defaultValuenumber0—
onChange(value: number) => void——
maxnumber5—
sizenumber24Star size in px
readOnlybooleanfalse—
labelstring"Rating"—

Install

$ npx shadcn@latest add https://chromotion.dev/r/star-rating.json

The CLI installs the base component; your customizations live in the code generated on the Customize tab.

More like this