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 CustomColorRangeDemo() {
return (
<div className="flex gap-8 items-center justify-center mt-2">
{[...Array(11).keys()].map((value) => (
<Gauge
key={value}
value={value * 10}
size="small"
colors={{
"0": "#420c25",
"10": "#571032",
"20": "#5d0c34",
"30": "#5d0c34",
"50": "#76063f",
"60": "#ba0056",
"70": "#f12b82",
"80": "#e7006d",
"90": "#ff4d8d",
"100": "#ffe9f4"
}}
/>
))}
</div>
);
}