Rating

Visual star feedback indicator with support for hover selection, read-only stats, and customizable scale sizes.

Preview & Interactive Laboratory

Interactive Selection

Select Rating (3 / 5 Stars)

Sizes & Read-Only

Large Read-Only (size=28)

Standard Read-Only (size=16)

Custom Upper Threshold (max=10)

10-Star Decagram Layout

Usage & Implementation

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

const [value, setValue] = React.useState(4);

<Rating 
  value={value} 
  onValueChange={setValue} 
  size={24} 
/>

React / Tailwind

Granular Customization

Star Shell

The grid container holding star vectors.

className={`className`}

Star Count

Change maximum count threshold from standard scale.

className={`max={10}`}

Action Mode

Bind callbacks to persist selected indexes.

className={`onValueChange={(val) => ...}`}

API Reference (Props)

Prop	Type	Default	Description
value	number	undefined	Current rating selected value index.
max	number	5	Maximum threshold bound of stars.
readOnly	boolean	false	Disables click events and hover animations.
size	number	16	Star size in pixels.