Rating

What it does

Rating is a client component that renders a row of clickable stars. It supports both controlled mode (you manage the value) and uncontrolled mode (the component manages its own state). Stars highlight on hover and fire onChange when a star is clicked. Pass readOnly to display a static score without any interaction.

Usage

Display only (read-only)

import Rating from "@/components/Rating";

<Rating value={4} readOnly />

Controlled input

"use client";
import { useState } from "react";
import Rating from "@/components/Rating";

export default function Example() {
  const [score, setScore] = useState(0);

  return <Rating value={score} onChange={setScore} />;
}

Uncontrolled with a default

<Rating defaultValue={3} onChange={(n) => console.log(n)} />

Props

• value — the controlled rating value (1 to max). When provided, the component is in controlled mode and you are responsible for updating it via onChange.
• defaultValue — the initial value in uncontrolled mode. Defaults to 0 (no stars selected).
• max — the total number of stars to render. Defaults to 5. Set to 10 for a ten-point scale, for example.
• onChange — callback fired with the selected number when a star is clicked. Receives a single number argument.
• readOnly — when true, stars are not clickable and hover effects are disabled. Use this to display a product rating without allowing interaction.
• size — pixel size of each star SVG. Defaults to 24. Increase for a hero display, decrease for inline use.