Rating

Star rating on native radios (arrow keys, forms) with hover preview, or readOnly display with fractional stars for averages.

npx @kznlabs/labsui add rating

import { Rating } from "@/components/ui/rating";export function ProductRating({  average,  count,}: {  average: number;  count: number;}) {  return (    <div className="flex items-center gap-2 text-sm">      <Rating readOnly value={average} size="sm" />      <span className="font-medium">{average}</span>      <span className="text-muted-foreground">· {count} reviews</span>    </div>  );}

<Rating>

Star rating. Interactive: native radios (arrow keys, forms, screen readers) with a hover preview and a spring lift/press on the stars. readOnly: an image of the score, fractions included.

defaultValuedefault 0
number
Rating at first render (uncontrolled).
labeldefault "Rating"
string
Group label (visually hidden).
maxdefault 5
number
Number of stars.
name
string
Form field name for the chosen value.
onValueChange
(value: number) => void
Called with the picked rating.
readOnlydefault false
boolean
Display only: renders fractions (4.6) as a partially filled star, no inputs.
sizedefault "default"
"sm" | "default"
Star size.
value
number
Controlled rating; pair with onValueChange.

Prop	Type	Default
`defaultValue` Rating at first render (uncontrolled).	`number`	`0`
`label` Group label (visually hidden).	`string`	`"Rating"`
`max` Number of stars.	`number`	`5`
`name` Form field name for the chosen value.	`string`	—
`onValueChange` Called with the picked rating.	`(value: number) => void`	—
`readOnly` Display only: renders fractions (4.6) as a partially filled star, no inputs.	`boolean`	`false`
`size` Star size.	`"sm" \| "default"`	`"default"`
`value` Controlled rating; pair with `onValueChange`.	`number`	—

* required. Every component also takes className.