Progress
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
Displays the status of a task that takes a long time.
Overview
Use Progress to show how far a task has advanced.
Progress is useful for uploads, imports, onboarding steps, generation, installation, and long-running actions. Use Meter for static values like quota or capacity.
Anatomy
A progress indicator has a value, maximum, optional label, optional formatted value, and visual bar.
Behavior
Use determinate progress when you know the percentage. Use a separate loading pattern when the duration is unknown.
Accessibility
Show text when the value matters. Do not communicate progress only through animation or color.
Installation
npx honestui@latest add progressUsage
import {
Progress,
ProgressLabel,
ProgressValue,
} from "@/components/ui/progress"<Progress value={40} />Note: If you render children inside Progress, you must also include ProgressTrack and ProgressIndicator inside it. Without them, the bar will not display. When no children are provided, a default track and indicator are rendered for you.
Examples
Our examples cover progress with labels and formatted values.