Rating

A customizable star rating component that supports read-only display and interactive input modes.

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

export function Pattern() {

Installation


pnpm dlx shadcn@latest add @reui/rating

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

<Rating rating={4.5} showValue editable />

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

export function Pattern() {

4.5

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

export function Pattern() {

0.0

"use client"

import { useState } from "react"

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

export function Pattern() {

The main component for displaying and editing star ratings.

Prop	Type	Default	Description
`rating`	`number`	-	Required. The current rating value. Supports decimal values for partial stars.
`maxRating`	`number`	`5`	Total number of stars to display.
`size`	`"sm" \| "default" \| "lg"`	`"md"`	The size of the stars and spacing.
`showValue`	`boolean`	`false`	Whether to show the numeric rating value next to the stars.
`editable`	`boolean`	`false`	Whether the rating can be changed by clicking on stars.
`onRatingChange`	`(rating: number) => void`	-	Callback fired when a star is clicked (if `editable` is true).
`starClassName`	`string`	-	Additional CSS classes for the numeric value container.
`className`	`string`	-	Additional CSS classes for the root container.

On This Page