Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

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

Installation

pnpm dlx mateui add progress

Anatomy

1import { Progress } from '@/components/ui/progress';

1<Progress value={33} />

Variants

Default

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

Indeterminate

When the progress value is missing or undefined, the bar animates infinitely to show an unknown duration process.

1'use client';
2
3import { Progress } from '@/components/ui/progress';
4
5export function Indeterminate() {
6  return <Progress className="w-[60%]" />;
7}

With Value Display

Combine the component with custom value labels.

Downloading...0%

1'use client';
2
3import * as React from 'react';
4import { Progress } from '@/components/ui/progress';
5
6export function WithValue() {
7  const [value, setValue] = React.useState(0);
8
9  React.useEffect(() => {
10    const interval = setInterval(() => {
11      setValue((v) => (v >= 100 ? 0 : v + 10));
12    }, 1000);
13    return () => clearInterval(interval);
14  }, []);
15
16  return (
17    <div className="flex w-[60%] flex-col gap-2">
18      <div className="flex justify-between text-sm font-medium">
19        <span>Downloading...</span>
20        <span>{value}%</span>
21      </div>
22      <Progress value={value} />
23    </div>
24  );
25}

API Reference

Progress

Prop	Type	Default	Description
`value`	`number \| null`	-	The progress value (shows indeterminate if null/missing)
`max`	`number`	`100`	The maximum value of the progress bar
`className`	`string`	-	Additional CSS classes

PreviousPopover NextRadio