About
A star-based rating input that lets users click to set a score or display a read-only average, with hover preview and glowing filled stars.
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 Rating from "@/components/ui/rating";
export default function RatingReadonlyDemo() {
return (
<div className="flex min-h-[320px] w-full items-center justify-center bg-background p-8">
<div className="w-full max-w-sm rounded-2xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-[0_1rem_2.25rem_-0.5rem_rgba(0,0,0,0.65)]">
<p className="text-sm text-[var(--muted-foreground)]">Average rating</p>
<div className="mt-2 flex items-center gap-2">
<Rating value={4} readonly />
<span className="text-sm text-foreground/80">4.0 (128 reviews)</span>
</div>
</div>
</div>
);
}
Dependencies
More by Marvin Kaunda
View all
Steps
Page Slide Transition
Card Resize Toggle