Progress

A bar showing the completion progress of a task.

x

'use client'

import * as React from 'react'
import { Progress } from '@/components/ui/progress'

export default function ProgressDemo() {
  const [value, setValue] = React.useState(13)

  React.useEffect(() => {
    const timer = setTimeout(() => setValue(66), 400)
    return () => clearTimeout(timer)
  }, [])

  return <Progress value={value} className="max-w-sm" />
}

Built on Base UI

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/progress.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Progress imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

The indeterminate sweep needs one animation in your global CSS. The CLI adds it for you; if you copy manually, add this inside your Tailwind v4 CSS file:

@theme inline {
  --animate-progress-indeterminate: progress-indeterminate 1.2s ease-in-out infinite;
  @keyframes progress-indeterminate {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(300%);
    }
  }
}

Usage

import { Progress } from '@/components/ui/progress'

<Progress value={66} />

// Indeterminate — no known completion time
<Progress value={null} />

Examples

Indeterminate

x

import { Progress } from '@/components/ui/progress'

export default function ProgressIndeterminate() {
  return <Progress value={null} aria-label="Loading" className="max-w-sm" />
}

API Reference

Name	Type	Default	Description
value	number \| null	—	Percentage complete (0–100), or null for an indeterminate sweep.
min / max	number	0 / 100	The value range.