Acronis UIKit
Legacy (shadcn-uikit)Components

Progress

A progress bar that indicates the completion status of a task.

Usage

import { Progress } from '@acronis-platform/shadcn-uikit';

Basic

A simple progress bar with a fixed value.

x

13% complete

Preview
View source
import * as React from 'react';
import { Progress } from '@acronis-platform/shadcn-uikit/react';

export function ProgressBasic() {
  const [progress, setProgress] = React.useState(13);

  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="space-y-4">
      <Progress value={progress} className="w-full" />
      <p className="text-sm text-gray-600">{progress}% complete</p>
    </div>
  );
}

Values

Progress bars at different completion percentages.

25% Complete25%
x
50% Complete50%
x
75% Complete75%
x
Task Completed100%
x
Preview
View source
import { Progress } from '@acronis-platform/shadcn-uikit/react';

export function ProgressValues() {
  return (
    <div className="space-y-6">
      <div className="space-y-2">
        <div className="flex justify-between text-sm">
          <span>25% Complete</span>
          <span className="text-gray-500">25%</span>
        </div>
        <Progress value={25} className="w-full" />
      </div>

      <div className="space-y-2">
        <div className="flex justify-between text-sm">
          <span>50% Complete</span>
          <span className="text-gray-500">50%</span>
        </div>
        <Progress value={50} className="w-full" />
      </div>

      <div className="space-y-2">
        <div className="flex justify-between text-sm">
          <span>75% Complete</span>
          <span className="text-gray-500">75%</span>
        </div>
        <Progress value={75} className="w-full" />
      </div>

      <div className="space-y-2">
        <div className="flex justify-between text-sm">
          <span>Task Completed</span>
          <span className="text-gray-500">100%</span>
        </div>
        <Progress value={100} className="w-full" />
      </div>
    </div>
  );
}

With Labels

Progress bars with percentage labels.

Uploading files...

x

Processing data...

x

Installation complete

x
Preview
View source
import { Progress } from '@acronis-platform/shadcn-uikit/react';

export function ProgressWithLabels() {
  return (
    <div className="space-y-6">
      <div className="space-y-2">
        <p className="text-sm">Uploading files...</p>
        <Progress value={33} className="w-full" />
      </div>

      <div className="space-y-2">
        <p className="text-sm">Processing data...</p>
        <Progress value={67} className="w-full" />
      </div>

      <div className="space-y-2">
        <p className="text-sm">Installation complete</p>
        <Progress value={100} className="w-full" />
      </div>
    </div>
  );
}

With Time

Progress bar showing estimated time remaining.

12 minutes remaining...

x

5 minutes remaining...

x

Almost done...

x
Preview
View source
import { Progress } from '@acronis-platform/shadcn-uikit/react';

export function ProgressWithTime() {
  return (
    <div className="space-y-6">
      <div className="space-y-2">
        <p className="text-sm">12 minutes remaining...</p>
        <Progress value={30} className="w-full" />
      </div>

      <div className="space-y-2">
        <p className="text-sm">5 minutes remaining...</p>
        <Progress value={60} className="w-full" />
      </div>

      <div className="space-y-2">
        <p className="text-sm">Almost done...</p>
        <Progress value={90} className="w-full" />
      </div>
    </div>
  );
}

Sizes

Progress bars in different heights.

Small (h-1)

x

Default (h-2)

x

Medium (h-3)

x

Large (h-4)

x
Preview
View source
import { Progress } from '@acronis-platform/shadcn-uikit/react';

export function ProgressSizes() {
  return (
    <div className="space-y-6">
      <div className="space-y-2">
        <p className="text-sm">Small (h-1)</p>
        <Progress value={50} className="h-1 w-full" />
      </div>

      <div className="space-y-2">
        <p className="text-sm">Default (h-2)</p>
        <Progress value={50} className="h-2 w-full" />
      </div>

      <div className="space-y-2">
        <p className="text-sm">Medium (h-3)</p>
        <Progress value={50} className="h-3 w-full" />
      </div>

      <div className="space-y-2">
        <p className="text-sm">Large (h-4)</p>
        <Progress value={50} className="h-4 w-full" />
      </div>
    </div>
  );
}

Animated

Animated progress bar that fills over time.

Loading...50%
x
Preview
View source
import * as React from 'react';
import { Progress, Button } from '@acronis-platform/shadcn-uikit/react';

export function ProgressAnimated() {
  const [progress, setProgress] = React.useState(50);

  const handleStart = () => {
    setProgress(0);
    const interval = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 100) {
          clearInterval(interval);
          return 100;
        }
        return prev + 10;
      });
    }, 500);
  };

  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <div className="flex justify-between text-sm">
          <span>Loading...</span>
          <span className="text-gray-500">{progress}%</span>
        </div>
        <Progress value={progress} className="w-full" />
      </div>
      <Button onClick={handleStart} size="sm">
        Start Progress
      </Button>
    </div>
  );
}

Multiple

Multiple progress bars displayed together.

Downloading assets85%
x
Installing dependencies60%
x
Configuring settings40%
x
Running tests20%
x
Preview
View source
import { Progress } from '@acronis-platform/shadcn-uikit/react';

export function ProgressMultiple() {
  return (
    <div className="space-y-6">
      <div className="space-y-2">
        <div className="flex justify-between text-sm">
          <span>Downloading assets</span>
          <span className="text-gray-500">85%</span>
        </div>
        <Progress value={85} className="w-full" />
      </div>

      <div className="space-y-2">
        <div className="flex justify-between text-sm">
          <span>Installing dependencies</span>
          <span className="text-gray-500">60%</span>
        </div>
        <Progress value={60} className="w-full" />
      </div>

      <div className="space-y-2">
        <div className="flex justify-between text-sm">
          <span>Configuring settings</span>
          <span className="text-gray-500">40%</span>
        </div>
        <Progress value={40} className="w-full" />
      </div>

      <div className="space-y-2">
        <div className="flex justify-between text-sm">
          <span>Running tests</span>
          <span className="text-gray-500">20%</span>
        </div>
        <Progress value={20} className="w-full" />
      </div>
    </div>
  );
}

Widths

Progress bars at different container widths.

Small width

x

Medium width

x

Large width

x

Full width

x
Preview
View source
import { Progress } from '@acronis-platform/shadcn-uikit/react';

export function ProgressWidths() {
  return (
    <div className="space-y-6">
      <div className="space-y-2">
        <p className="text-sm">Small width</p>
        <Progress value={50} className="w-48" />
      </div>

      <div className="space-y-2">
        <p className="text-sm">Medium width</p>
        <Progress value={50} className="w-64" />
      </div>

      <div className="space-y-2">
        <p className="text-sm">Large width</p>
        <Progress value={50} className="w-96" />
      </div>

      <div className="space-y-2">
        <p className="text-sm">Full width</p>
        <Progress value={50} className="w-full" />
      </div>
    </div>
  );
}

In Cards

Progress bars used within card components.

Project Alpha

Development in progress

Progress65%
x

Project Beta

Testing phase

Progress90%
x

Project Gamma

Planning stage

Progress25%
x

Project Delta

Completed

Progress100%
x
Preview
View source
import { Progress } from '@acronis-platform/shadcn-uikit/react';

export function ProgressInCards() {
  return (
    <div className="grid gap-4 md:grid-cols-2">
      <div className="rounded-lg border p-4">
        <h4 className="mb-2 font-semibold">Project Alpha</h4>
        <p className="mb-4 text-sm text-gray-600">Development in progress</p>
        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <span>Progress</span>
            <span className="text-gray-500">65%</span>
          </div>
          <Progress value={65} className="w-full" />
        </div>
      </div>

      <div className="rounded-lg border p-4">
        <h4 className="mb-2 font-semibold">Project Beta</h4>
        <p className="mb-4 text-sm text-gray-600">Testing phase</p>
        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <span>Progress</span>
            <span className="text-gray-500">90%</span>
          </div>
          <Progress value={90} className="w-full" />
        </div>
      </div>

      <div className="rounded-lg border p-4">
        <h4 className="mb-2 font-semibold">Project Gamma</h4>
        <p className="mb-4 text-sm text-gray-600">Planning stage</p>
        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <span>Progress</span>
            <span className="text-gray-500">25%</span>
          </div>
          <Progress value={25} className="w-full" />
        </div>
      </div>

      <div className="rounded-lg border p-4">
        <h4 className="mb-2 font-semibold">Project Delta</h4>
        <p className="mb-4 text-sm text-gray-600">Completed</p>
        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <span>Progress</span>
            <span className="text-gray-500">100%</span>
          </div>
          <Progress value={100} className="w-full" />
        </div>
      </div>
    </div>
  );
}

Interactive

Progress bar with user-controlled value.

Adjust progress75%
x
Preview
View source
import * as React from 'react';
import { Progress, Button } from '@acronis-platform/shadcn-uikit/react';

export function ProgressInteractive() {
  const [progress, setProgress] = React.useState(75);

  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <div className="flex justify-between text-sm">
          <span>Adjust progress</span>
          <span className="text-gray-500">{progress}%</span>
        </div>
        <Progress value={progress} className="w-full" />
      </div>
      <div className="flex gap-2">
        <Button
          onClick={() => setProgress(Math.max(0, progress - 10))}
          size="sm"
        >
          -10%
        </Button>
        <Button
          onClick={() => setProgress(Math.min(100, progress + 10))}
          size="sm"
        >
          +10%
        </Button>
        <Button onClick={() => setProgress(0)} variant="outline" size="sm">
          Reset
        </Button>
        <Button onClick={() => setProgress(100)} variant="outline" size="sm">
          Complete
        </Button>
      </div>
    </div>
  );
}

API Reference

The Progress component wraps Base UI Progress primitives and extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>. Pass value as a number (0-100) or null for indeterminate state (displays an animated progress indicator).

Edit on GitHub

Filter

A control for narrowing down content by applying filter criteria.

Skeleton

A placeholder loading animation that indicates content is being loaded.

On this page

UsageBasicValuesWith LabelsWith TimeSizesAnimatedMultipleWidthsIn CardsInteractiveAPI Reference