Progress

Displays an indicator showing the completion progress of a task, typically rendered as a horizontal bar.

✓Smooth CSS transition on value change
✓Built on Radix Progress for correct ARIA semantics (role=progressbar, aria-valuenow)
✓Indeterminate state supported via value={null}
✓Fully styleable height, color, and border-radius via className
✓Forwards ref to the underlying element

import { Progress }from "@aetherstack/ui"

progress.tsx

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

export function ProgressDemo() {
  return <Progress value={60} />
}

Usage

Pass any number between 0 and 100 to control the fill level.

25%

50%

75%

100%

Override the default h-2 height with a className to create thicker or thinner bars.

Prop	Type	Default	Description
value	number \| null	—	Current progress value between 0 and 100. Pass null for indeterminate state.
className	string	—	Additional class names applied to the root track element. Use to override height, color, or radius.
...props	React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>	—	All Radix Progress Root props are forwarded, including max and getValueLabel.

* Required props

→Radix sets role=progressbar, aria-valuemin=0, aria-valuemax=100, and aria-valuenow automatically.
→When value is null the component enters indeterminate state — screen readers announce it as in-progress.
→Provide a visible label near the progress bar so users understand what is being measured.