Rating

Forms

Interactive star rating component with pixel styling.

Import

import { PixelRating } from "@/components/ui/pixel/pixel-rating"

Usage

Current rating: 3 stars

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel/pixel-rating.tsx

"use client";

import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";

const pixelRatingVariants = cva(
  "inline-flex gap-1 pixel-borders items-center",
  {
    variants: {
      variant: {
        default: "text-[#ff8c00]",
        gold: "text-[#ffd700]",
        red: "text-[#ff0000]",
      },
      size: {
        sm: "text-base",
        md: "text-2xl",
        lg: "text-4xl",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "md",
    },
  },
);

export interface PixelRatingProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof pixelRatingVariants> {
  value?: number;
  maxStars?: number;
  onRatingChange?: (rating: number) => void;
  readOnly?: boolean;
}

const PixelRating = React.forwardRef<HTMLDivElement, PixelRatingProps>(
  (
    {
      className,
      variant,
      size,
      value = 0,
      maxStars = 5,
      onRatingChange,
      readOnly = false,
      ...props
    },
    ref,

// ... (more code below)

Props

PropTypeDefaultDescription
valuenumber0Current rating value
maxStarsnumber5Maximum number of stars
onRatingChange(rating: number) => void-Callback when rating changes
readOnlybooleanfalseMake rating read-only
variant"default" | "gold" | "red""default"Color variant
size"sm" | "md" | "lg""md"Star size

Examples

Interactive Rating

Current rating: 3 stars

Read-Only Display

Current rating: 3 stars

Different Sizes

Current rating: 3 stars

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.