# Rating (UI SDK): Read-only

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

Canonical: https://hextaui.com/docs/ui-sdk-rating/examples/read-only

Component docs: https://hextaui.com/docs/ui-sdk-rating

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/ui-sdk-rating-read-only.json
```

This adds `components/examples/ui-sdk-rating/read-only.tsx` with the Rating component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/ui-sdk-rating/read-only.tsx"
"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 }
```

## Props in this example

### Rating

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number \| null` | – |  |
| `size` | `"sm" \| "default" \| "lg"` | `"default"` |  |
| `readOnly` | `boolean` | `false` |  |
| `getValueLabel` | `(value: number, max: number) => string` | – | Names each score for its radio, and a read-only rating. |

## More Rating examples

- [Half stars](https://hextaui.com/docs/ui-sdk-rating/examples/half)
- [Sizes](https://hextaui.com/docs/ui-sdk-rating/examples/sizes)
- [Deselectable](https://hextaui.com/docs/ui-sdk-rating/examples/deselectable)
- [Controlled](https://hextaui.com/docs/ui-sdk-rating/examples/controlled)
- [Form](https://hextaui.com/docs/ui-sdk-rating/examples/form)
- [Custom icon](https://hextaui.com/docs/ui-sdk-rating/examples/custom-icon)
- [Disabled](https://hextaui.com/docs/ui-sdk-rating/examples/disabled)
- [Right to left](https://hextaui.com/docs/ui-sdk-rating/examples/rtl)