progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Philosophy
Progress bars answer the most anxious user question: "Is this working?" A determinate progress indicator builds trust by showing measurable advancement. We keep the API to a single value prop because progress is inherently one-dimensional - the component's visual treatment handles the rest.
Installation
npx @gentleduck/cli add progress
npx @gentleduck/cli add progress
Usage
import { Progress } from "@/components/ui/progress"import { Progress } from "@/components/ui/progress"<Progress value={33} /><Progress value={33} />RTL Support
Set dir="rtl" on Progress for a local override, or set DirectionProvider once at app/root level for global direction.
Motion
Motion components work standalone, but some compositions may behave unexpectedly — this is still under active development. If you find a broken composition, please file an issue.
Use MotionProgress for smooth value animations powered by motion. The progress bar animates with a bouncy spring transition when the value changes.
Requires the motion package. Use MotionProgress instead of Progress. Same props. The regular Progress is perfectly fine - this is an optional enhancement.
API Reference
Progress
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | (required) | Progress value from 0 to 100 representing the completion percentage |
dir | 'ltr' | 'rtl' | - | Text direction. Resolved by primitives useDirection (dir prop -> DirectionProvider -> 'ltr'). |
className | string | -- | Additional CSS classes for the progress bar container |
...props | Omit<React.HTMLProps<HTMLDivElement>, 'value'> | - | Additional props to spread to the content div |
MotionProgress
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | (required) | Progress value from 0 to 100. Value changes animate with a springBouncy spring transition. |
dir | 'ltr' | 'rtl' | - | Text direction. Resolved by primitives useDirection (dir prop -> DirectionProvider -> 'ltr'). |
className | string | - | Additional CSS classes for the progress bar container |
...props | Omit<React.HTMLProps<HTMLDivElement>, 'value'> | - | Additional props to spread to the content div |