Progress

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

Preview

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/progress.json

Usage

tsx
5 lines
1
2
3
4
5
import { Progress } from "@/components/ui/progress"

export default function MyComponent() {
  return <Progress value={60} />
}

Examples

Different Values

25%Low
50%Medium
75%High
100%Complete

Custom Colors

With Label

Uploading...67%

Please wait while your file uploads

Sizes

Small
Default
Large

Props

PropTypeDefaultDescription
valuenumber0The progress value (0-100)
maxnumber100The maximum value
classNamestringAdditional CSS classes