Progress

import { Progress } from "@/components/ui/progress";

export default function Basic() {
  return <Progress value={66} />;
}

import { Progress } from "@/components/ui/progress";

export default function Sizes() {
  return (
    <>
      <Progress value={11} className="h-px" />
      <Progress value={22} className="h-0.5" />
      <Progress value={33} className="h-1" />
      <Progress value={44} className="h-1.5" />
      <Progress value={55} className="h-2" />
      <Progress value={66} className="h-2.5" />
      <Progress value={77} className="h-3" />
      <Progress value={88} className="h-3.5" />
      <Progress value={99} className="h-4" />
    </>
  );
}

import { Progress } from "@/components/ui/progress";

export default function Indeterminate() {
  return <Progress value={50} className="bg-destructive/10 [&_div]:bg-destructive" />;
}

"use client";
import { useState, useEffect } from "react";
import { Progress } from "@/components/ui/progress";
import { Button } from "@/components/ui/button";

export default function WithLabel() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    const t = setInterval(() => {
      setValue((v) => (v >= 100 ? 100 : v + 10));
    }, 500);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="space-y-2">
      <Progress value={value} />
      <div className="text-sm text-muted-foreground">{value}%</div>
      <Button size="sm" variant="outline" onClick={() => setValue(0)}>
        Reset
      </Button>
    </div>
  );
}

"use client";
import { useState } from "react";
import { Progress } from "@/components/ui/progress";
import { Button } from "@/components/ui/button";

export default function ManualProgress() {
  const [value, setValue] = useState(25);
  return (
    <div className="space-y-2">
      <Progress value={value} />
      <div className="flex gap-2">
        <Button size="sm" variant="outline" onClick={() => setValue((v) => Math.max(0, v - 10))}>
          -10%
        </Button>
        <Button size="sm" variant="outline" onClick={() => setValue((v) => Math.min(100, v + 10))}>
          +10%
        </Button>
      </div>
    </div>
  );
}