Progress

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

pnpm add @saasflare/ui

"use client"import { Progress } from "@saasflare/ui"/** A single progress bar at a fixed value. */export function Demo() {    return (        <div className="w-full max-w-md">            <Progress value={68} />        </div>    )}

"use client"import { useEffect, useState } from "react"import { Progress } from "@saasflare/ui"/** A live upload progress bar that fills on mount. */export function Demo() {    const [value, setValue] = useState(8)    useEffect(() => {        const timer = setInterval(() => {            setValue((v) => (v >= 100 ? 8 : v + 6))        }, 600)        return () => clearInterval(timer)    }, [])    return (        <div className="w-full max-w-md space-y-2">            <div className="flex justify-between text-sm">                <span className="text-muted-foreground">Uploading backup…</span>                <span className="font-medium tabular-nums">{value}%</span>            </div>            <Progress value={value} />        </div>    )}

"use client"import { Progress } from "@saasflare/ui"const quotas = [    { label: "API calls", used: 84200, limit: 100000 },    { label: "Storage", used: 6.4, limit: 10, unit: "GB" },    { label: "Team seats", used: 3, limit: 5, unit: "seats" },]/** Stacked plan-usage meters, a common billing-page pattern. */export function Demo() {    return (        <div className="w-full max-w-md space-y-4">            {quotas.map((q) => (                <div key={q.label} className="space-y-1.5">                    <div className="flex justify-between text-sm">                        <span className="font-medium">{q.label}</span>                        <span className="text-muted-foreground tabular-nums">                            {q.used.toLocaleString()} / {q.limit.toLocaleString()}                            {q.unit ? ` ${q.unit}` : ""}                        </span>                    </div>                    <Progress value={(q.used / q.limit) * 100} />                </div>            ))}        </div>    )}