Progress

React Progress components are used to show the completion state of a task or process. They are commonly used for file uploads, form steps, loading states, and long-running actions where users need visual feedback.

This Progress component is built with React and styled using Tailwind CSS. It displays a linear progress bar with an optional percentage label and supports custom styling through props.

Installation

Usage

Import the component and pass the progress value.

import { Progress } from "@/registry/core/progress";

export default () => <Progress progress={50} withLabel />;

Examples

Basic Progress

Use the progress bar without a label.

<Progress progress={30} />

Progress with Label

Display the percentage value next to the bar.

<Progress progress={75} withLabel />

API Reference

Progress

Extends div element props.

Accessibility

• Uses role="progressbar" for screen readers
• Sets aria-valuemin, aria-valuemax, and aria-valuenow
• aria-valuetext reflects the current progress value
• Fully keyboard and screen-reader accessible.

Notes

• The progress bar fills smoothly based on the progress prop.
• Works well inside flex and grid layouts
• Label is optional and aligns next to the progress bar.
• Rounded corners and overflow handling are applied for cross-browser compatibility.