Rating

A star rating component with keyboard navigation and hover effects.

Installation

npx love-ui@latest add rating

Usage

import { Rating } from "@/components/rating"

<Rating
  defaultValue={3}
  max={5}
  size={24}
  onValueChange={(value) => console.log(value)}
/>

Features

Customizable number of stars and size
Support for keyboard navigation
Hover and focus states
Accessible ARIA attributes
Read-only mode
Hidden input support for forms

Examples

Custom colors

"use client";

import { Rating, RatingButton } from "../../../../../packages/rating";

const Example = () => (
  <Rating defaultValue={3}>
    {Array.from({ length: 5 }).map((_, index) => (
      <RatingButton className="text-yellow-500" key={index} />
    ))}
  </Rating>
);

export default Example;

Custom size

"use client";

import { Rating, RatingButton } from "../../../../../packages/rating";

const Example = () => (
  <Rating defaultValue={3}>
    {Array.from({ length: 5 }).map((_, index) => (
      <RatingButton key={index} size={30} />
    ))}
  </Rating>
);

export default Example;

Custom icon

"use client";

import { Rating, RatingButton } from "../../../../../packages/rating";
import { HeartIcon } from "lucide-react";

const Example = () => (
  <Rating defaultValue={3}>
    {Array.from({ length: 5 }).map((_, index) => (
      <RatingButton icon={<HeartIcon />} key={index} />
    ))}
  </Rating>
);

export default Example;

Controlled

"use client";

import { Rating, RatingButton } from "../../../../../packages/rating";
import { Input } from "../../../../../packages/ui/src/ui/input";
import { useState } from "react";

const Example = () => {
  const [value, setValue] = useState(3);

  return (
    <>
      <Rating onValueChange={setValue} value={value}>
        {Array.from({ length: 5 }).map((_, index) => (
          <RatingButton key={index} />
        ))}
      </Rating>
      <Input
        className="w-32 bg-background"
        max={5}
        min={0}
        onChange={(e) => setValue(Number(e.target.value))}
        type="number"
        value={value}
      />
    </>
  );
};

export default Example;

Pill Tags