Rating

npx shadcn@latest add https://ui.saasflare.io/r/rating.json

pnpm add @saasflare/ui

"use client"import { useState } from "react"import { Rating } from "@saasflare/ui"/** An interactive star rating with controlled state. */export function Demo() {    const [score, setScore] = useState(0)    return (        <div className="flex flex-col gap-2">            <Rating value={score} onChange={setScore} aria-label="Rate your experience" />            <p className="text-sm text-muted-foreground">                {score > 0 ? `You rated ${score} of 5` : "Tap a star to rate"}            </p>        </div>    )}

"use client"import { Rating } from "@saasflare/ui"/** A read-only display of an average score using half-star precision. */export function Demo() {    return (        <div className="flex items-center gap-2">            <Rating value={4.3} readOnly allowHalf size="sm" aria-label="Average rating" />            <span className="text-sm text-muted-foreground">4.3 (1,204 reviews)</span>        </div>    )}

"use client"import { Rating } from "@saasflare/ui"/** The four available star sizes. */export function Demo() {    return (        <div className="flex flex-col items-start gap-3">            <Rating value={4} readOnly size="sm" aria-label="Small" />            <Rating value={4} readOnly size="md" aria-label="Medium" />            <Rating value={4} readOnly size="lg" aria-label="Large" />            <Rating value={4} readOnly size="xl" aria-label="Extra large" />        </div>    )}