Skip to main content

​
Installation

npx @kuzenbo/cli add progress

​
Usage

import { Progress } from "@kuzenbo/core";

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

​
Examples

​
With Label

Add a descriptive label to the progress bar. 
<Progress value={45}>
  <Progress.Label>Uploading files...</Progress.Label>
</Progress>

​
With Value Display

Show the current progress value. 
<Progress value={75}>
  <Progress.Label>Download progress</Progress.Label>
  <Progress.Value />
</Progress>

​
Custom Composition

Build custom progress layouts using sub-components. 
<Progress value={60}>
  <div className="flex items-center justify-between">
    <Progress.Label>Processing</Progress.Label>
    <Progress.Value />
  </div>
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
</Progress>

​
Indeterminate State

Omit the value prop for indeterminate progress. 
<Progress>
  <Progress.Label>Loading...</Progress.Label>
</Progress>

​
Min and Max Values

Define custom value ranges. 
<Progress value={250} min={0} max={500}>
  <Progress.Label>Custom range (0-500)</Progress.Label>
  <Progress.Value />
</Progress>

​
API Reference

​
Progress

Based on Base UI Progress component.
​
value
number
Current progress value. Omit for indeterminate state.
​
min
number
default:"0"
Minimum value.
​
max
number
default:"100"
Maximum value.
​
getValueLabel
(value: number, max: number) => string
Function to format the value label.
​
className
string
Additional CSS classes.

​
Progress.Track

The track container for the progress indicator.
​
className
string
Additional CSS classes.

​
Progress.Indicator

The visual indicator showing progress.
​
className
string
Additional CSS classes.

​
Progress.Label

Descriptive label for the progress bar.
​
className
string
Additional CSS classes.

​
Progress.Value

Displays the current progress value.
​
className
string
Additional CSS classes.

​
Accessibility

  • Uses role="progressbar" for proper semantics
  • Announces current value to screen readers
  • aria-valuemin, aria-valuemax, and aria-valuenow are set automatically
  • aria-valuetext can be customized with getValueLabel
  • Indeterminate state is properly announced

​
Best Practices

  • Use determinate progress when you know the total
  • Use indeterminate progress for unknown durations
  • Always provide a descriptive label
  • Show percentage for user-uploaded content
  • Update progress smoothly to avoid jarring jumps
  • Consider showing estimated time remaining for long operations

Build docs developers (and LLMs) love

Get started for freeTalk to us