Rating

Display and collect ratings using stars or custom icons.

Basic Rating

Selected value: 3

Half-Star Precision

Selected value: 2.5

Read-Only Rating

Different Sizes

Small
Medium (Default)
Large

Custom Icon

Usage

import { useState } from "react"
import { Rating } from "@/components/rating"

export default function MyComponent() {
  const [value, setValue] = useState(3)
  
  return (
    <div className="space-y-2">
      <Rating 
        value={value} 
        onChange={setValue} 
        precision={0.5}
      />
      <div>Selected rating: {value}</div>
    </div>
  )
}

Props

Name
Type
Default
Description
value
number
0
Current rating value.
max
number
5
Maximum rating value.
onChange
function
undefined
Function called when the rating changes.
size
string
"md"
Size of the rating icons: "sm", "md", or "lg".
readOnly
boolean
false
Whether the rating is read-only.
precision
number
1
The precision for the rating value: 0.5 or 1.
icon
ReactNode
Star
Custom icon for filled state.