Star Rate

Forms

About

A five-star rating control for reviews and feedback where each selected star pops in with a staggered animation, five stars throws a small sparkle burst, and a line below states what the rating means.

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

Code

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

Usage.tsx

"use client";

import { StarRate } from "@/components/ui/star-rate";

export default function StarRateDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8 text-foreground">
      <div className="flex w-full max-w-sm flex-col gap-5 rounded-[20px] border border-border bg-card p-6 text-card-foreground shadow-[0_20px_40px_-24px_rgb(0_0_0/0.35)]">
        <div className="text-center">
          <p className="text-[15px] font-medium">How was the dhow cruise?</p>
          <p className="mb-4 text-[13px] text-muted-foreground">
            Thursday 17:30 · Al Mouj marina
          </p>
          <StarRate label="Rate the dhow cruise" />
        </div>
      </div>
    </div>
  );
}