Progress

Displays the status of a task that takes a long time.

"use client";

import { useEffect, useState } from "react";

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

export default function Particle() {
  const [value, setValue] = useState(20);

  useEffect(() => {
    const interval = setInterval(() => {
      setValue((current) =>
        Math.min(100, Math.round(current + Math.random() * 25)),
      );
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return <Progress value={value} />;
}

Installation


pnpm dlx shadcn@latest add @coss/progress

Usage

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"

<Progress value={40} />

Note: If you render children inside Progress, you must also include ProgressTrack and ProgressIndicator inside it. Without them, the bar will not display. When no children are provided, a default track and indicator are rendered for you.

API Reference

Progress

Root component. Styled wrapper for Progress.Root from Base UI. When no children are provided, automatically renders a track and indicator.

ProgressTrack

Track container for the progress indicator. Styled wrapper for Progress.Track from Base UI.

ProgressIndicator

Visual indicator showing the current progress. Styled wrapper for Progress.Indicator from Base UI.

ProgressLabel

Label text for the progress bar. Styled wrapper for Progress.Label from Base UI.

ProgressValue

Displays the current value. Styled wrapper for Progress.Value from Base UI.

Examples

With Label and Value

Export data

import {
  Progress,
  ProgressIndicator,
  ProgressLabel,
  ProgressTrack,
  ProgressValue,
} from "@/components/ui/progress";

export default function Particle() {
  return (
    <Progress value={60}>
      <div className="flex items-center justify-between gap-2">
        <ProgressLabel>Export data</ProgressLabel>
        <ProgressValue />
      </div>
      <ProgressTrack>
        <ProgressIndicator />
      </ProgressTrack>
    </Progress>
  );
}

With Formatted Value

Upload

"use client";

import {
  Progress,
  ProgressIndicator,
  ProgressLabel,
  ProgressTrack,
  ProgressValue,
} from "@/components/ui/progress";

export default function Particle() {
  return (
    <Progress max={512} value={502}>
      <div className="flex items-center justify-between gap-2">
        <ProgressLabel>Upload</ProgressLabel>
        <ProgressValue>{(_formatted, value) => `${value} / 512`}</ProgressValue>
      </div>
      <ProgressTrack>
        <ProgressIndicator />
      </ProgressTrack>
    </Progress>
  );
}

On This Page

Installation Usage API Reference Progress ProgressTrack ProgressIndicator ProgressLabel ProgressValue Examples With Label and Value With Formatted Value