Stars Rating

Interactive star rating components with hover preview, read-only mode, and numeric value display for user feedback.

Note

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

Yellow Fill Rating

An interactive star rating with filled yellow stars and hover scale effects. Shows the current numeric value next to the stars when in interactive mode. Supports click-to-set, hover-to-preview, and read-only display. Best for review forms, product ratings, and feedback collection.

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

Amber Outline Rating

A refined star rating with amber outline/fill styling and optional numeric value display. Features smooth transitions, hover preview, and responsive text sizing that matches the star scale. The showValue prop allows toggling the numeric score independently. Ideal for reviews, testimonials, and score displays where a more elegant aesthetic is desired.

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`	Whether to display the numeric score

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