Rating

Rating displays a clamped numeric score using full, half-filled, and empty stars.

Live Editor

function RatingExample() {
  const [value, setValue] = React.useState(4.5);

  return (
    <div className="grid gap-4">
      <Rating value={value} showValue reviewCount={128} size={24} />
      <input
        aria-label="Rating value"
        type="range"
        min="0"
        max="5"
        step="0.5"
        value={value}
        onChange={(event) => setValue(Number(event.target.value))}
      />
    </div>
  );
}

Result

Loading...

import { Rating } from "niom-parts";

<Rating value={4.5} showValue reviewCount={128} />

Common use cases

Ratings can show compact review summaries, integer-only scores, or a custom semantic color.

Live Editor

function RatingUseCases() {
  return (
    <div className="grid gap-4">
      <Rating value={4.8} showValue reviewCount={624} size={18} />
      <Rating value={3} precision={1} showValue />
      <Rating value={8.5} max={10} showValue color="var(--color-accent)" size={16} />
      <Rating value={-2} showValue reviewCount={0} />
    </div>
  );
}

Result

Loading...

Props

Prop	Type	Default
value	number	required
max	number	5
precision	1 | 0.5	0.5
size	number	20
showValue	boolean	false
reviewCount	number	-
color	string	var(--color-highlight)
className	string	-
IconClassName	string	-