Progress

Displays an indicator showing the completion progress of a task.

Installation

Install the component Progress in your project using the CLI.

Progress.tsx

pnpm dlx behsseui@latest add Progress

Install the component manually.

Create a ui folder at the root of the project, then a component folder inside it, and finally a Progress.tsx file in that folder.

Copy and paste the following code into your project.

ui/components/Progress.tsx

1import type { HTMLAttributes } from "react"
2import { cn } from "@/lib/utils"
3
4type ProgressProps = {
5  value?: number
6  max?: number
7  className?: string
8} & HTMLAttributes<HTMLDivElement>
9
10export function Progress({ value = 0, max = 100, className, ...props }: ProgressProps) {
11  const percentage = Math.min(Math.max((value / max) * 100, 0), 100)
12
13  return (
14    <div
15      role="progressbar"
16      aria-valuemin={0}
17      aria-valuemax={max}
18      aria-valuenow={value}
19      className={cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className)}
20      {...props}
21    >
22      <div
23        className="h-full bg-primary transition-all duration-300 ease-in-out"
24        style={{ width: `${percentage}%` }}
25      />
26    </div>
27  )
28}
29

Usages

Different variants and use cases for the Progress component.

Default

A basic progress bar at 60%.

Default.tsx

<Progress value={60} />

With Label

Progress bar with a percentage label.

Progress45%

With Label.tsx

<div className="space-y-2">
  <div className="flex justify-between text-sm">
    <span>Progress</span>
    <span>45%</span>
  </div>
  <Progress value={45} />
</div>

Sizes

Different progress bar heights.

Sizes.tsx

<div className="space-y-4 w-full">
  <Progress value={30} className="h-1" />
  <Progress value={50} className="h-2" />
  <Progress value={70} className="h-3" />
  <Progress value={90} className="h-4" />
</div>

Colors

Custom colors using className.

Colors.tsx

<div className="space-y-4 w-full">
  <Progress value={60} />
  <Progress value={45} className="[&>div]:bg-green-500 bg-green-500/20" />
  <Progress value={75} className="[&>div]:bg-orange-500 bg-orange-500/20" />
  <Progress value={30} className="[&>div]:bg-destructive bg-destructive/20" />
</div>

Empty

Progress bar at 0%.

Empty.tsx

<Progress value={0} />

Complete

Progress bar at 100%.

Complete.tsx

<Progress value={100} />

← Retour aux composants