Rating

A star rating input where users click or drag across a row of icons to pick a score, with keyboard control and support for half-star or other fractional values.

@delego

byappica-dev

Read-only average rating display preview

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

const BREAKDOWN = [
  { label: "Value for money", score: 4.5 },
  { label: "Build quality", score: 4 },
  { label: "Battery life", score: 3.5 },
];

export default function RatingReadOnly() {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center gap-3">
        <Rating value={4.3} step={0.1} size={32} readOnly />
        <span className="text-sm font-medium">4.3</span>
        <span className="text-foreground-muted text-sm">(1,284 reviews)</span>
      </div>
      <div className="flex flex-col gap-1.5">
        {BREAKDOWN.map(({ label, score }) => (
          <div key={label} className="flex items-center gap-3">
            <span className="text-foreground-muted w-32 text-sm">{label}</span>
            <Rating value={score} step={0.5} size={16} readOnly />
          </div>
        ))}
      </div>
    </div>
  );
}