Progress
A progress bar that displays completion toward a task.
Installation
$
Usage
import { Progress } from "@/components/ui/progress"Examples
Default
The indicator eases to its value (300ms ease-out). Remount via key to replay the fill from zero.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | null | - | Current progress from 0 to max. Pass null for an indeterminate state (the bar renders empty). |
| max | number | 100 | The value at which the bar reads full. Drives both the visual fill and the value reported to assistive tech. |
| getValueLabel | (value, max) => string | - | Overrides the accessible label announced for the current value. |
"use client"
import * as React from "react"
import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
import { cn } from "@/registry/lib/utils"
function Progress({
className,
value,
max = 100,
...props
}: Omit<React.ComponentProps<typeof ProgressPrimitive.Root>, "value"> & {
value?: number | null
}) {
const percent = value != null && max > 0 ? (value / max) * 100 : 0
return (
<ProgressPrimitive.Root
data-slot="progress"
value={value ?? null}
max={max}
className={cn(
"bg-neutral-200 dark:bg-neutral-800 relative h-1.5 w-full overflow-hidden rounded-full",
className
)}
{...props}
>
<ProgressPrimitive.Indicator
data-slot="progress-indicator"
className="bg-accent h-full w-full flex-1 transition-transform duration-300 ease-out motion-reduce:transition-none"
style={{ width: "100%", transform: `translateX(-${100 - percent}%)` }}
/>
</ProgressPrimitive.Root>
)
}
export { Progress }