Progress

Accessible progress bar with size and variant options for visual feedback on task completion.

Preview

Basic progress

import { Progress } from '@/registry/ui-kit/tailwind-progress/react'

function Example() {
  return <Progress value={60} />
}

Component API

Prop	Default	Description
`Progress`	`—`	Progress bar with value (0-100), size (sm/md/lg), and variant (default/success/warning/danger).

Source Code

"use client";

import React from "react";

interface ProgressProps {
  value: number;
  size?: "sm" | "md" | "lg";
  variant?: "default" | "success" | "warning" | "danger";
  className?: string;
}

const sizeMap: Record<string, string> = {
  sm: "h-1.5",
  md: "h-2.5",
  lg: "h-4",
};

const variantMap: Record<string, string> = {
  default: "bg-indigo-600",
  success: "bg-emerald-500",
  warning: "bg-amber-500",
  danger: "bg-rose-500",
};

export function Progress({
  value,
  size = "md",
  variant = "default",
  className = "",
}: ProgressProps) {
  const clamped = Math.max(0, Math.min(100, value));

  return (
    <div
      className={`w-full overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800 ${sizeMap[size]} ${className}`}
      role="progressbar"
      aria-valuenow={clamped}
      aria-valuemin={0}
      aria-valuemax={100}
    >
      <div
        className={`rounded-full transition-all duration-500 ${sizeMap[size]} ${variantMap[variant]}`}
        style={{ width: `${clamped}%` }}
      />
    </div>
  );
}