Progress Circle

npx shadcn@latest add https://ui.saasflare.io/r/progress-circle.json

pnpm add @saasflare/ui

"use client"import { ProgressCircle } from "@saasflare/ui"/** A circular progress ring with a centered percentage label. */export function Demo() {    return (        <ProgressCircle value={72} size="lg">            <span className="text-lg font-semibold tabular-nums">72%</span>        </ProgressCircle>    )}

"use client"import { ProgressCircle } from "@saasflare/ui"/** A goal tracker with a custom max — quarterly revenue against target. */export function Demo() {    const booked = 84    const target = 120    return (        <ProgressCircle value={booked} max={target} size="xl">            <div className="text-center">                <span className="block text-xl font-bold tabular-nums">${booked}k</span>                <span className="text-xs text-muted-foreground">of ${target}k</span>            </div>        </ProgressCircle>    )}

"use client"import { ProgressCircle, type ProgressCircleSize } from "@saasflare/ui"const sizes: ProgressCircleSize[] = ["sm", "md", "lg", "xl"]/** The four size presets — `sm`, `md`, `lg`, `xl`. */export function Demo() {    return (        <div className="flex flex-wrap items-center gap-6">            {sizes.map((size) => (                <div key={size} className="flex flex-col items-center gap-2">                    <ProgressCircle value={64} size={size} />                    <span className="text-xs text-muted-foreground">{size}</span>                </div>            ))}        </div>    )}