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} />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 |
RTL Support
Set dir="rtl" on Progress for a local override, or set DirectionProvider once at app/root level for global direction.