Rating

Component rating-basic not found in registry.

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add rating

Usage

import * as React from "react"
 
import { Rating } from "@/registry/react-aria/ui/rating"
 
export default function Example() {
  const [value, setValue] = React.useState(3.5)
  return <Rating value={value} onChange={setValue} showValue />
}

Features

• Half-star precision (hover / click)
• Controlled & uncontrolled usage
• Show numeric value option
• Custom max value (not limited to 5)
• Sizes: sm, md, lg
• Read-only & disabled states
• Custom icon component support
• Accessible semantics and keyboard affordances

Examples

Basic

Component rating-basic not found in registry.

With Value

Component rating-with-value not found in registry.

Sizes

Component rating-sizes not found in registry.

Custom Max Value

Component rating-custom-max not found in registry.

Interactive Patterns

Component rating-interactive not found in registry.

Half Star & Custom Icons

Component rating-half-star not found in registry.

API Reference

See the Radix UI version for the detailed prop table (API surface is the same across frameworks).

Accessibility Notes

• Stars act as an interactive rating scale; half-star states provide granular feedback.
• Provide textual context (e.g. label or aria-label) when used in forms.

Looking for another pattern? Add a new example file under react-aria/examples/ and reference it with a <ComponentPreview />.