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 * as React from "react";
import Rating from "@/components/ui/rating";
export default function RatingDemo() {
const [value, setValue] = React.useState(3);
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="mb-2 text-sm text-[var(--muted-foreground)]">
Rate your experience
</p>
<Rating value={value} onChange={setValue} />
<p className="mt-3 text-sm text-foreground/80">{value} / 5</p>
</div>
</div>
);
}
Dependencies
More by Marvin Kaunda
View all
Steps
Page Slide Transition
Card Resize Toggle
More in Forms
View all
Premium Auth
548
Contact Card
1.1K
Login 2
10
Form
17
Form
20
Login 1
59
Card Studio
46
SignInPage
719
