Progress
A horizontal progress bar showing completion from 0 to 100%. Built on Radix UI Progress.
Fixed values
Taller bar (custom height)
Installation
pnpm dlx @hex-core/cli add progressIndeterminate / loading
Progress always renders 0% when value is unspecified, so use Skeleton for indeterminate states — the registry's whenNotToUse aligns with this.
<div className="space-y-2" aria-busy="true" aria-live="polite">
<Skeleton className="h-2 w-full" />
<p className="text-xs text-muted-foreground">Working on it…</p>
</div>Stepped progress with label
Pair Progress with explicit numeric context (file count + percentage)
<div className="space-y-2">
<div className="flex items-center justify-between text-sm">
<span>Uploading 8 of 12 files</span>
<span className="text-muted-foreground tabular-nums">66%</span>
</div>
<Progress value={66} aria-label="Upload progress" />
</div>API 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
Verified against @hex-core/components@1.12.0