Progress

Overview

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

Preview

Preview

Light mode

Dark mode

Code

<Progress value={25} className="mb-2" />
<Progress value={50} className="mb-2" />
<Progress value={75} className="mb-2" />

Installation

CLI

npx nativecn-ui add Progress 

Manual

1. First Step

   Include Progress.tsx in your project.

2. Second Step

   Update the import paths to match your project setup.

Properties

• className?: string (optional) - The classes for the View bar.
• value: number - The value of the progress bar. It should be a number between 0 and 100.

Usage

<Progress value={25} className="mb-2" />
<Progress value={50} className="mb-2" />
<Progress value={75} className="mb-2" />