Rating

Forms 3

About

A customizable star rating component that supports read-only display and interactive input modes.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Rating to your project and fits it to your theme.

Code

How Rating is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import { useState } from 'react';
import { Alert, AlertIcon, AlertTitle } from '@/components/ui/alert';
import { Rating } from '@/components/ui/rating';
import { CircleAlert } from 'lucide-react';
import { toast } from 'sonner';

export default function RatingEditableDemo() {
  const [productRating, setProductRating] = useState(0);
  const handleRatingChange = (rating: number) => {
    setProductRating(rating);

    toast.custom(
      (t) => (
        <Alert variant="mono" icon="success" close={true} onClose={() => toast.dismiss(t)}>
          <AlertIcon>
            <CircleAlert />
          </AlertIcon>
          <AlertTitle>
            Rated <span className="font-bold">{rating}</span> out of 5
          </AlertTitle>
        </Alert>
      ),
      {
        duration: 5000,
      },
    );
  };

  return (
    <div className="space-y-8">
      <Rating rating={productRating} editable={true} onRatingChange={handleRatingChange} showValue={true} />
    </div>
  );
}