Progress

Overview

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

Preview

• Preview
• Code

Light mode

Dark mode

Light mode

Dark mode

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

Installation

• CLI
• Manual

npx nativecn-ui add Progress 

npx nativecn-ui add Progress 

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" />