Progress

Displays an indicator showing the completion progress of a task.

Improve on GitHub

Installation

Add this component to your project using the npui CLI:

npx npui add progress

Variants & Examples

Default Progress

A basic progress bar indicating completion.

Code for Default Progress

1import { Progress } from "@/components/ui/progress";
2import { useState, useEffect } from "react";
3
4export function DefaultProgress() {
5  const [progress, setProgress] = useState(13);
6
7  useEffect(() => {
8    const timer = setTimeout(() => setProgress(66), 500);
9    return () => clearTimeout(timer);
10  }, []);
11
12  return <Progress value={progress} className="w-[60%]" />;
13}

Props

These are the available props for the Progress component:

Prop	Type	Description	Default
value	number	The current value of the progress bar (0-100).	-
max	number	The maximum value of the progress bar.	100