Rating

Installation

$ npx shadcn@latest add https://goodui.dev/r/rating.json

The file lands in components/goodui/rating.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/rating works too.

Usage

import * as React from "react"
import { Rating } from "@/components/goodui/rating"

export function ReviewForm() {
  const [score, setScore] = React.useState(0)
  return (
    <form className="flex flex-col gap-3">
      <Rating
        aria-label="Rate your appointment"
        value={score}
        onValueChange={setScore}
        size="lg"
        itemLabels={["Poor", "Fair", "Good", "Great", "Excellent"]}
        showLabel
        name="score"
      />
      <button disabled={!score}>Send review</button>
    </form>
  )
}

When to use

Examples

<Rating value={4.7} readOnly size="xs" showValue count={1284} />

<Rating defaultValue={3.5} precision={0.5} showValue variant="glow" aria-label="Product quality" />

<Rating
  labels={{
    group: "Bewertung",
    item: (n) => `${n} Sterne`,
    readOnly: (v, max) => `Bewertet mit ${v} von ${max}`,
    countSr: (c) => `${c} Bewertungen`,
  }}
/>

API reference

Accessibility

• •Whole steps render role="radiogroup" with one role="radio" per icon, aria-checked, roving tabindex and names like "4 stars, Great".
• •Half steps render one role="slider" with aria-valuenow and aria-valuetext ("3.5 out of 5"), since a radio per half icon reads badly.
• •readOnly renders role="img" named "Rated 4.7 out of 5"; the visible count is hidden from screen readers and replaced by "1,284 reviews".
• •Pass aria-label or aria-labelledby to say what is being rated; the default name is "Rating". Every built-in string goes through labels.
• •name renders a hidden input with the number for native forms.

Motion

• •fill: the icon fill grows from the inline start with a clip-path transition (280 ms), also while previewing on hover.
• •pop: fill plus the picked icon springs to 1.32× with a slight tilt and back (320 ms). wave: every filled icon pops in turn, 55 ms apart.
• •The hovered icon scales to 1.14 (180 ms). none is static.
• •Reduced motion: transitions, hover scale and pops are off; values still update instantly.

• •Pops use the Web Animations API on the icon elements, so they cost no React renders. Read-only ratings attach no pointer or keyboard handlers.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related