Progress

A progress bar component that shows the completion progress of a task with customizable variants, sizes, and text display options.

Basic Usage

With Percentage (Outside)

35%
68%
92%

With Percentage (Inside)

15%
45%
78%

Custom Labels

2 of 5 tasks completed
Downloading...
Almost done!

Sizes

Small
30%
Medium (Default)
50%
Large
70%
Extra Large
90%

Variants

Default
25%
Primary
45%
Success
65%
Warning
80%
Error
95%

Edge Cases

Empty (0%)
0%
Low percentage with inside text
8%
Complete (100%)
100%
Custom max value
150/200 MB
Progress Component
tsx
1import { HTMLAttributes, forwardRef } from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3import { cn } from "@/lib/cn";
4

5// Define progress variants using class-variance-authority for better type safety and maintainability
6const progressVariants = cva(
7  // Base styles that apply to all progress bars
8  [
9    "relative overflow-hidden rounded-full bg-neutral-200",
10    "dark:bg-neutral-800",