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

npx @tailgrids/cli add progress

Usage

Import the component and pass the progress value.

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

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

Examples

Basic Progress

Use the progress bar without a label.

Progress with Label

Display the percentage value next to the bar.

Custom Progress

Customize the appearance of the progress bar using class names.

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.