Feedback
Progress
Determinate progress bar. Pass value 0–100. Colour via className on the indicator slot.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/progress
Examples
Controlled
A progress bar that can be controlled by a slider.
Label
Use a Field component to add a label to the progress bar.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { Progress } from "@codefast/ui/progress";
<Progress value={68} />
// recolour the indicator
<Progress
value={92}
className="**:data-[slot=progress-indicator]:bg-rose-500"
/>
API reference
Props for each part of the component. All native element props are also forwarded.
Progress
A determinate progress bar built on Radix Progress.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | Current progress from 0 to max. |
| max | number | 100 | Upper bound of value. |
| className | string | — | Style the indicator via **:data-[slot=progress-indicator] to change its colour. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- Has role=progressbar with aria-valuenow / valuemin / valuemax set for you.
- Pair with a visible label or percentage — don’t rely on the bar alone.
- For unknown-duration work, prefer a Spinner over a fake-moving bar.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use for determinate tasks where you know the percentage.
- Show the percentage or step count next to the bar.
Don’t
- Don’t animate a bar with no real progress to fake activity.
- Don’t use colour as the only signal of a critical threshold.