Rating

Overview

The Rating component provides a visual representation of a rating value using configurable indicators (default: stars). It supports both read-only display and optional interactive rating selection modes with beautiful animations.

Preview

InteractiveAllow Half

Max:

Preview

Current rating: 2 / 5

Code

  <Rating
  value={2}
  max={5}
  size="md"
  colorScheme="yellow"
  iconType={StarIcon}
  interactive
/>

Emoji Rating

Preview

Emoji Rating with Animations

😡😠😐😊😍

Current rating: 0 / 5

Animation Type: spring • Try clicking and hovering!

Code

  <Rating
    value={0}
    max={5}
    size="xl"
    interactive
    animationType="spring"
    emojis={["😡", "😠", "😐", "😊", "😍"]}
  />

Variants

Sizes

All Sizes

XS

SM

MD

LG

XL

Color Schemes

All Color Schemes

YELLOW

RED

BLUE

GREEN

PURPLE

PINK

ORANGE

AMBER

Installation

npm

ignix add component rating

Usage

Import the component:

import { Rating } from '@src/components/ui/rating';
import { Star } from 'lucide-react';

Basic Usage

function BasicRating() {
  const [value, setValue] = useState(0);
  
  return (
    <Rating
      value={value}
      max={5}
      interactive
      iconType={Star}
      onChange={setValue}
    />
  );
}

Props

Prop	Type	Default	Description
value	number	undefined	Current rating value (0 to max). If undefined, component manages its own state.
max	number	5	Maximum rating scale
interactive	boolean	false	Whether the rating is interactive
disabled	boolean	false	Whether the rating is disabled (only applies when interactive)
allowHalf	boolean	false	Whether to show half stars
showValue	boolean	false	Whether to show the numeric value
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Size of the rating stars
orientation	'horizontal' | 'vertical'	'horizontal'	Orientation of the rating
colorScheme	'yellow' | 'red' | 'blue' | 'green' | 'purple' | 'pink' | 'orange' | 'indigo' | 'teal' | 'amber'	'yellow'	Color scheme for filled icons
iconType	LucideIcon	Star	Lucide icon component to use
emoji	string	undefined	Single emoji to use for all rating items
emojis	string[]	undefined	Array of emojis - one per rating item
emptyEmoji	string	undefined	Emoji for empty/unfilled items
animationType	'bounce' | 'pulse' | 'fade' | 'slide' | 'rotate' | 'scale' | 'elastic' | 'spring' | 'glow' | 'shimmer' | 'none'	'spring'	Animation type for star interactions
readOnly	boolean	false	Read-only mode (overrides interactive)
onChange	(value: number) => void	undefined	Callback when value changes
onEmojiSelect	(value: number, emoji: string) => void	undefined	Callback when emoji is selected (only for emoji mode)