Primitive

Progress

Displays an indicator showing the completion progress of a task.

80%

Installation

npx benflux-ui add progress

Usage

import { Progress } from "@benflux-ui/react"

<Progress value={60} />

With Label & Value

Uploading...45%
Complete100%

Sizes

Props

PropTypeDefaultDescription
valuenumber0Progress value from 0 to 100
variant"default" | "gradient" | "glow" | "striped""default"Visual style of the progress bar
size"sm" | "default" | "lg""default"Height of the progress bar
showValuebooleanfalseShows the percentage value
labelstringLabel displayed above the progress bar
animatedbooleantrueEnables fill animation on mount