Stars Rating

Note

All presented components are responsive and compatible with Tailwind CSS. Make sure Tailwind is configured in your project to use them.

Stars Rating 1

Stars Rating 2

Props Reference

Prop	Type	Default	Description
`rating`	`number`	`0`	Current rating value (0 to maxRating)
`maxRating`	`number`	`5`	Maximum number of stars
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the stars
`readonly`	`boolean`	`false`	Whether the rating is interactive
`onChange`	`(rating: number) => void`	`undefined`	Callback when rating changes
`className`	`string`	`undefined`	Additional CSS classes
`showValue`	`boolean`	`true` (Stars Rating 2 only)	Whether to display numeric value

Usage Examples

Basic Interactive Rating

import { useState } from 'react';
import StarsRating1 from '@/components/star-forge/others/stars-rating-1';

export default function Example() {
  const [rating, setRating] = useState(3);

  return (
    <StarsRating1
      rating={rating}
      onChange={setRating}
      size="md"
    />
  );
}

Read-only Display

import StarsRating2 from '@/components/star-forge/others/stars-rating-2';

export default function Example() {
  return (
    <StarsRating2
      rating={4.5}
      readonly
      size="lg"
      showValue
    />
  );
}

Custom Styling

import StarsRating1 from '@/components/star-forge/others/stars-rating-1';

export default function Example() {
  return (
    <StarsRating1
      rating={2.5}
      onChange={(rating) => console.log('New rating:', rating)}
      size="sm"
      className="my-custom-class"
    />
  );
}

Features

Interactive Mode: Click to set rating, hover for preview
Read-only Mode: Display rating without interaction
Multiple Sizes: Small, medium, and large star sizes
Smooth Animations: Hover effects and transitions
Accessibility: Proper focus management and keyboard support
TypeScript: Full type safety with IntelliSense support
Customizable: Additional CSS classes and callbacks

Stars Rating

On this page