Rating

import React from 'react';
import { Rating } from '@skeletonlabs/skeleton-react';
import { Star } from 'lucide-react';

export const Page: React.FC = () => {
	return <Rating value={3} width="w-44" iconEmpty={<Star size={24} />} iconFull={<Star size={24} className="fill-surface-950-50" />} />;
};

Using Icons

import React from 'react';
import { Rating } from '@skeletonlabs/skeleton-react';
import { Bone, Skull } from 'lucide-react';

export const Page: React.FC = () => {
	return <Rating value={3} max={6} width="w-44" iconEmpty={<Bone size={24} />} iconFull={<Skull size={24} />} />;
};

Interactive

import React, { useState } from 'react';
import { Rating } from '@skeletonlabs/skeleton-react';
import { Star } from 'lucide-react';

export const Page: React.FC = () => {
	const [value, setValue] = useState(3);
	return (
		<Rating
			value={value}
			onValueChange={setValue}
			width="w-44"
			interactive
			iconEmpty={<Star size={24} />}
			iconFull={<Star size={24} className="fill-surface-950-50" />}
		/>
	);
};

Steps

Use the step property to define a fractional granularity.

import React, { useState } from 'react';
import { Rating } from '@skeletonlabs/skeleton-react';
import { Star } from 'lucide-react';

export const Page: React.FC = () => {
	const [value, setValue] = useState(2.5);
	return (
		<Rating
			value={value}
			onValueChange={setValue}
			step={2}
			width="w-44"
			interactive
			iconEmpty={<Star size={24} />}
			iconFull={<Star size={24} className="fill-surface-950-50" />}
		/>
	);
};

Right-to-Left

import React, { useState } from 'react';
import { Rating } from '@skeletonlabs/skeleton-react';
import { Star } from 'lucide-react';

export const Page: React.FC = () => {
	const [value, setValue] = useState(2.5);
	return (
		<div dir="rtl">
			<Rating
				value={value}
				onValueChange={setValue}
				step={2}
				width="w-44"
				interactive
				iconEmpty={<Star size={24} />}
				iconFull={<Star size={24} className="fill-surface-950-50" />}
			/>
		</div>
	);
};

API Reference

Property	Type	Description
`value`	number	Sets the rating value.
`max`	number	Sets the maximum rating value.
`interactive`	boolean	Sets interactive mode.
`step`	number	Sets the rating fractional granularity.
`base`	string	Sets base styles.
`width`	string	Sets width styles.
`justify`	string	Sets justification styles.
`spaceX`	string	Sets horizontal spacing styles.
`classes`	string	Provide arbitrary CSS classes.
`buttonBase`	string	Sets the button base styles.
`buttonPosition`	string	Sets the button position styles.
`buttonAspect`	string	Sets the button aspect ratio styles.
`buttonClasses`	string	Provide arbitrary CSS classes to the rating button.
`emptyBase`	string	Set base styles for the empty icon.
`emptyClip`	string	Set the clip styles for the empty icon.
`emptyInteractive`	string	Set interactive state styles for the empty icon.
`emptyStatic`	string	Set non-interactive state styles for the empty icon.
`emptyClasses`	string	Provide arbitrary CSS classes for the empty icon.
`fullBase`	string	Set base styles for the full icon.
`fullClip`	string	Set the clip styles for the full icon.
`fullInteractive`	string	Set interactive state styles for the full icon.
`fullStatic`	string	Set non-interactive state styles for the full icon.
`fullClasses`	string	Provide arbitrary CSS classes for the full icon.
`onMouseDown`	object	Triggers on rating mouse down.
`onKeyDown`	object	Triggers on rating key down.
`onValueChange`	object	Triggers on rating value change.
`iconEmpty`	React.ReactNode	The empty icon children.
`iconFull`	React.ReactNode	The full icon children.