Progress

Displays an indicator showing the completion progress of a task.

"use client"

import * as React from "react"
import { Progress } from "@/components/cubix/progress"

export function ProgressDemo() {
  const [progress, setProgress] = React.useState(13)

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

  return <Progress value={progress} className="w-[60%]" />
}

Installation

pnpm dlx cubix@latest add progress

Usage

Import

import { Progress } from "@/components/cubix/progress"

Example

<Progress value={33} />

Composition

Use ProgressLabel and ProgressValue to add a label and value display.

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/cubix/progress"

<Progress value={56} className="w-full max-w-sm">
  <ProgressLabel>Upload progress</ProgressLabel>
  <ProgressValue />
</Progress>

Progress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
    └── ProgressIndicator

Progress Bar

<div className="flex w-full flex-col gap-4">
  <Progress value={0} />
  <Progress value={25} />
  <Progress value={50} />
  <Progress value={75} />
  <Progress value={100} />
</div>

Label

Use ProgressLabel and ProgressValue to add a label and value display.

Upload progress

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/cubix/progress"

<Progress value={56} className="w-full max-w-sm">
  <ProgressLabel>Upload progress</ProgressLabel>
  <ProgressValue />
</Progress>

Controlled

A progress bar that can be controlled by a range input.

"use client"

import * as React from "react"
import { Progress } from "@/components/cubix/progress"

export function ProgressControlledDemo() {
  const [value, setValue] = React.useState(50)

  return (
    <div className="flex w-full flex-col gap-4">
      <Progress value={value} className="w-full" />
      <input
        type="range"
        min={0}
        max={100}
        value={value}
        onChange={(event) => setValue(Number(event.target.value))}
      />
    </div>
  )
}

File Upload List

document.pdf
x
2m 30s
presentation.pptx
x
45s
spreadsheet.xlsx
x
5m 12s
image.jpg
x
Complete

<ul className="flex flex-col gap-3">
  {files.map((file) => (
    <li key={file.id} className="flex items-center gap-3">
      <FileIcon className="size-5" />
      <span className="flex-1 truncate">{file.name}</span>
      <Progress value={file.progress} className="w-32" />
      <span className="text-muted-foreground">{file.timeRemaining}</span>
    </li>
  ))}
</ul>

API Reference

See also the Base UI Progress documentation for primitive props.

Progress

Prop	Type	Default	Description
value	number \| null	-	Current progress. Use null for an indeterminate state (Base UI).
max	number	100	Maximum value of the progress bar.
min	number	0	Minimum value of the progress bar (Base UI).
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	Optional ProgressLabel and ProgressValue rendered above the track.

ProgressLabel

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	The label text for the progress bar.

ProgressValue

Prop	Type	Default	Description
children	((formattedValue: string \| null, value: number \| null) => React.ReactNode) \| null	-	Optional render function for custom formatting (Base UI). Defaults to a percentage string.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

ProgressTrack

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	Usually a ProgressIndicator.

ProgressIndicator

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).