Progress

Composition preview

Try Progress alongside its related feedback & loading components. These examples keep all actions local.

Usage

import { Progress } from "@/components/ui/progress";

<>
<Progress value={60} max={100} aria-label="Upload progress" />
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

value, max, aria-label; ProgressSurface for existing host-rendered meters

Usage & accessibility

Expose a valid numeric value and maximum. Keep indeterminate work separate from measurable completion.

Implementation contract

src/components/ui/progress.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.