Docs
Rating Group

Rating Group

A user interface element that allows users to provide a rating or evaluation for something.

Installation

Copy and paste the following code into your project. 

"use client"

import * as React from "react"

import { RatingGroup as RatingGroupPrimitive } from "@ark-ui/react/rating-group"
import { StarIcon } from "lucide-react"

import { cn } from "@/lib/utils"

const RatingGroup = RatingGroupPrimitive.Root

const RatingGroupContext = RatingGroupPrimitive.Context

const RatingGroupLabel = React.forwardRef<
  React.ElementRef<typeof RatingGroupPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof RatingGroupPrimitive.Label>
>(({ className, ...props }, ref) => (
  <RatingGroupPrimitive.Label
    ref={ref}
    className={cn(
      "font-medium text-sm leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70",
      className
    )}
    {...props}
  />
))
RatingGroupLabel.displayName = RatingGroupPrimitive.Label.displayName

const RatingGroupControl = React.forwardRef<
  React.ElementRef<typeof RatingGroupPrimitive.Control>,
  React.ComponentPropsWithoutRef<typeof RatingGroupPrimitive.Control>
>(({ className, children, ...props }, ref) => (
  <RatingGroupPrimitive.Control
    ref={ref}
    className={cn("flex w-max gap-0.5", className)}
    {...props}
  >
    <RatingGroupPrimitive.HiddenInput />
    {children}
  </RatingGroupPrimitive.Control>
))
RatingGroupControl.displayName = RatingGroupPrimitive.Control.displayName

const RatingGroupItem = React.forwardRef<
  React.ElementRef<typeof RatingGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RatingGroupPrimitive.Item>
>(({ className, ...props }, ref) => (
  <RatingGroupPrimitive.Item
    ref={ref}
    className={cn(
      "cursor-pointer transition-all data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 *:data-[highlighted]:fill-current",
      className
    )}
    {...props}
  >
    <StarIcon />
  </RatingGroupPrimitive.Item>
))
RatingGroupItem.displayName = RatingGroupPrimitive.Item.displayName

export {
  RatingGroup,
  RatingGroupContext,
  RatingGroupControl,
  RatingGroupItem,
  RatingGroupLabel,
}

Not Found

Update the import paths to match your project setup.

Usage 

import {
  RatingGroup,
  RatingGroupControl,
  RatingGroupItem,
  RatingGroupLabel,
} from "@/components/ui/rating-group"

<RatingGroup count={5} defaultValue={3}>
  <RatingGroupLabel>Label</RatingGroupLabel>
  <RatingGroupControl>
    <RatingGroupItem index={1} />
    <RatingGroupItem index={2} />
    <RatingGroupItem index={3} />
    <RatingGroupItem index={4} />
    <RatingGroupItem index={5} />
  </RatingGroupControl>
</RatingGroup>