Star Rating

Forms 13

About

An interactive star rating input with hover preview, sparkle burst animation on click, and a rolling numeric value label, plus a read-only mode for fractional ratings.

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

Code

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

Usage.tsx

"use client";

import React from "react";
import StarRating from "@/components/ui/star-rating";

export default function StarRatingDemo() {
  return (
    <div className="flex w-full flex-col items-center gap-5 py-10">
      <div className="flex flex-col items-center gap-3 rounded-xl border border-neutral-200 bg-white px-8 py-6 dark:border-neutral-800 dark:bg-neutral-900">
        <p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
          Rate your experience
        </p>
        <StarRating showValue label="Rate your experience" />
      </div>
      <p className="text-sm text-neutral-500 dark:text-neutral-400">
        Hover to preview, click to commit — arrow keys work too
      </p>
    </div>
  );
}