Park UI Logo
GitHub
Components
Rating group

Rating Group

Allows users to rate items using a set of icons.

Usage

Star IconStar IconStar IconStar IconStar Icon
import { RatingGroup, type RatingGroupProps } from '~/components/ui'

export const Demo = (props: RatingGroupProps) => {
  return (
    <RatingGroup defaultValue={3} {...props}>
      Label
    </RatingGroup>
  )
}

Examples

Different color

Use the colorPalette prop to change the color of the rating group.

<RatingGroup colorPalette="red" value={3}>
  Label
</RatingGroup>

Rating count

Use the count prop to render a specific number of stars.

<RatingGroup count={10}>Label</RatingGroup>

Half star rating

Use the allowHalf prop to enable half star ratings.

<RatingGroup value={3.5} allowHalf>
  Label
</RatingGroup>

Installation

npx @park-ui/cli components add rating-group