MiComponents/Documentation

Progress

A component for displaying progress of a task or operation.

Installation

npx micomponents-cli add progress

Preview

Usage

Import

import { ProgressBar } from "@/components/ui/progress";

Basic Usage

<ProgressBar progress={50} variant="secondary" />

Progress Variants

Display progress with different color variants.

25% - Warning

50% - Info

75% - Success

100% - Danger

API Reference

PropTypeDefaultDescription
progress0 | 25 | 50 | 75 | 1000Current progress percentage
variantmidnight | secondary | tertiary | info | success | warning | dangersecondaryColor variant for the progress bar