HextaUI
150Get started
HextaUI

Rating (UI SDK): Read-only

A read-only rating is one image named by getValueLabel, and it shows any score, like an average.

4.3(1,284 reviews)
"use client"

import { Rating, RatingItem } from "@/components/ui/ui-sdk-rating"

function UiSdkRatingReadOnly() {
  return (
    <div className="flex items-center gap-2 text-sm">
      <Rating
        readOnly
        size="sm"
        value={4.3}
        getValueLabel={(value, max) =>
          "Rated " + value + " out of " + max + " stars"
        }
      >
        <RatingItem />
      </Rating>
      <span className="font-medium tabular-nums">4.3</span>
      <span className="text-muted-foreground">(1,284 reviews)</span>
    </div>
  )
}

export { UiSdkRatingReadOnly }

Add this example

This adds the example as components/examples/ui-sdk-rating/read-only.tsx, together with the Rating component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/ui-sdk-rating-read-only.json

To add only the component, follow the Rating installation.

Props in this example

The Rating props this example sets, from the API reference.

Rating

PropTypeDefault
value
number | null–
size
"sm" | "default" | "lg""default"
readOnly
booleanfalse
getValueLabelNames each score for its radio, and a read-only rating.
(value: number, max: number) => string–

Every prop is in the Rating API reference.

More Rating examples

See them all, with keyboard support and accessibility notes, on the Rating page.

Related components