Rating

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add rating

Usage#

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

export function Example() {
  const [value, setValue] = useState(4)
  return <Rating value={value} onValueChange={setValue} aria-label="Rate your experience" />
}

Sizes#

sm (16px), md (20px), and lg (28px) line up with the rest of the control scale.

Tones#

tone recolors the active glyph, independent of the icon: amber (default) is the vivid review-gold for stars, and red is the love-red that suits a Heart. Both ride dedicated rating tokens, brighter than the warning status hue.

Variants#

filled (default) is the classic solid-star look: the active glyph renders at Phosphor's fill weight, the rest stay outline. outline keeps the DS rule, drawing the active star as a tinted outline instead.

Read-only & fractional#

readOnly renders a static display and accepts fractional values: an average like 4.3 shows a partly-filled star via the clip overlay.

Custom icon & length#

Swap the star for any Phosphor icon with icon, and set the scale length with max. Recolor the fill with tone: amber (default review-gold) or red, which suits a heart. The icon follows the active variant: solid by default, outline with variant="outline".

Disabled#

FAQ#