HextaUI
150Get started
HextaUI

Rating (UI SDK): Sizes

size is sm, default or lg.

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

function UiSdkRatingSizes() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Rating aria-label="Small rating" size="sm" defaultValue={3}>
        <RatingItem />
      </Rating>
      <Rating aria-label="Default rating" defaultValue={3}>
        <RatingItem />
      </Rating>
      <Rating aria-label="Large rating" size="lg" defaultValue={3}>
        <RatingItem />
      </Rating>
    </div>
  )
}

export { UiSdkRatingSizes }

Add this example

This adds the example as components/examples/ui-sdk-rating/sizes.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-sizes.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
defaultValue
number | null–
size
"sm" | "default" | "lg""default"

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