Rating

Component rating-basic not found in registry.

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add rating

Usage

Basic interactive usage:

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

Features

• Half-star precision (click or hover on left/right half)
• Controlled & uncontrolled patterns
• Show numeric value with optional decimal precision
• Custom max value (e.g. out of 3, 7, 10)
• Multiple sizes: sm, md, lg
• Read-only & disabled modes
• Custom icon support (hearts, thumbs, etc.)
• Accessible: proper radiogroup semantics & keyboard/hover interactions

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

Rating

Props of the Rating component.

| Prop | Type | Default | Description | | --------------- | ------------------------- | ----------- | --------------------------------------------------- | ------ | ----------------------------------------- | | value | number | 0 | Current rating value (controlled) | | defaultValue | number | undefined | Initial value (uncontrolled) | | maxValue | number | 5 | Total number of icons (can be any positive integer) | | showValue | boolean | false | Displays the numeric value next to the stars | | interactive | boolean | true | Enables user interaction (hover / click) | | readOnly | boolean | false | Prevents changes while still showing hover styles | | disabled | boolean | false | Disables interaction and styles accordingly | | size | "sm" | "md" | "lg" | "md" | Visual sizing of the star icons & spacing | | icon | React.ComponentType | Star | Custom icon component | | onChange | (value: number) => void | - | Fired when the committed value changes | | onValueChange | (value: number) => void | - | Alias / supplementary change handler |

Half-star logic is handled automatically by dividing click & hover regions per icon.

Accessibility Notes

• Uses role="radiogroup" with each star acting like a radio-like interactive segment.
• Numeric value display helps screen reader users when showValue is enabled.
• Ensure sufficient color contrast for filled vs empty states when theming.

Need an example not covered here? Consider adding a new scenario file under radix-ui/examples/ and referencing it with a <ComponentPreview />.