Progress
A horizontal progress bar showing completion from 0 to 100%. Built on Radix UI Progress.
Uploading13%
Fixed values
25%
50%
75%
100%
Taller bar (custom height)
Installation
pnpm
pnpm dlx @hex-core/cli add progressAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Current value (0–max). Omit to render at 0% (both visually and in ARIA — the component clamps undefined to 0). Use Skeleton for indeterminate loading states. |
max | number | 100 | Maximum value |
className | string | — | Additional CSS classes |
AI Guidance
When to use
Use for deterministic progress where completion is measurable: file uploads, multi-step form completion, batch processing. Pair with a visible numeric label where precision matters.
When not to use
Don't use for indeterminate waits (use a spinner or Skeleton). Don't use for completion over long time-spans without a human-readable ETA.
Common mistakes
- Passing 0–1 float instead of 0–100
- Not labeling the progress (users can't tell what's progressing)
- Updating too frequently (>30fps) — wastes renders
Accessibility
Radix wires role='progressbar', aria-valuenow, aria-valuemin, aria-valuemax. Pair with a visible label or aria-label for context.
Token budget: 250