Components
Loading preview...
Display progress relative to a limit or related to a task.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/progressimport React, { useState } from "react";
import { Progress } from "@/components/ui/progress";
export default function DynamicColorsDemo() {
const [value, setValue] = useState(0);
return (
<div className="flex flex-col gap-4 w-1/2">
<Progress
colors={{
0: "var(--geist-foreground)",
25: "var(--geist-error)",
50: "var(--geist-warning)",
75: "var(--geist-highlight-pink)",
100: "var(--geist-success)"
}}
value={value}
/>
<div className="flex gap-4">
<button
onClick={() => {
if (value < 100) setValue(value + 10);
}}
>
Increase
</button>
<button
onClick={() => {
if (value > 0) setValue(value - 10);
}}
>
Decrease
</button>
</div>
</div>
);
}