HextaUI
150Get started
HextaUI

Rating (UI SDK): Custom icon

Pass your own icon as the child of RatingItem and switch it with data-filled. tone sets the color.

import { IconHeart, IconHeartFilled } from "@tabler/icons-react"

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

function UiSdkRatingCustomIcon() {
  return (
    <Rating
      aria-label="How much did you like it?"
      defaultValue={3}
      tone="destructive"
    >
      <RatingItem>
        <IconHeart
          aria-hidden="true"
          className="size-6 group-data-[filled]/rating-item:hidden group-data-[partial]/rating-item:hidden"
        />
        <IconHeartFilled
          aria-hidden="true"
          className="hidden size-6 group-data-[filled]/rating-item:block group-data-[partial]/rating-item:block"
        />
      </RatingItem>
    </Rating>
  )
}

export { UiSdkRatingCustomIcon }

Add this example

This adds the example as components/examples/ui-sdk-rating/custom-icon.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-custom-icon.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–
tone
"default" | "neutral" | "destructive""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