Components
Loading preview...
A circular visual for conveying a percentage.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/gauge-1import { Gauge } from "@/components/ui/gauge-1";
export default function LabelDemo() {
return (
<div className="flex gap-8 items-center justify-center">
<Gauge value={80} size="tiny" showValue />
<Gauge value={100} size="tiny" showValue />
<Gauge value={80} size="small" showValue />
<Gauge value={100} size="small" showValue />
<Gauge value={80} size="medium" showValue />
<Gauge value={100} size="medium" showValue />
<Gauge value={80} size="large" showValue />
<Gauge value={100} size="large" showValue />
</div>
);
}