> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# ProgressBar
> A horizontal progress indicator with optional title, completion percentage, step count, and helper text.
```tsx theme={null}
import { ProgressBar, ProgressBarItem, ProgressBarSteps } from "@fanvue/ui";
import type {
ProgressBarItemProps,
ProgressBarItemSize,
ProgressBarItemVariant,
ProgressBarProps,
ProgressBarSize,
ProgressBarStepsProps,
ProgressBarVariant,
} from "@fanvue/ui";
```
## Examples
## Default
```tsx theme={null}
import { ProgressBar } from "@fanvue/ui";
```
## With Completion
```tsx theme={null}
import { ProgressBar } from "@fanvue/ui";
```
## All Variants
```tsx theme={null}
import { ProgressBar } from "@fanvue/ui";
{(["default", "brand", "mono", "generic", "neutral"] as const).map((variant) => (
{variant}
))}
```
## Full Featured
```tsx theme={null}
import { InfoCircleIcon, ProgressBar } from "@fanvue/ui";
}
/>
```
## With Steps
```tsx theme={null}
import { ProgressBar } from "@fanvue/ui";
```
## ProgressBarSteps — Brand
```tsx theme={null}
import { ProgressBarSteps } from "@fanvue/ui";
```
## ProgressBarSteps — Brand Small
```tsx theme={null}
import { ProgressBarSteps } from "@fanvue/ui";
```
## ProgressBarSteps — Mono
```tsx theme={null}
import { ProgressBarSteps } from "@fanvue/ui";
```
## Props
## ProgressBar
A horizontal progress indicator with optional title, completion percentage, step count, and helper text. The bar colour reflects progress when using the `"default"` variant.
Current progress value, clamped to 0–100.
Accessible label for the `progressbar` role.
Human-readable text alternative for the current value (e.g. "Step 3 of 5").
Helper content at the bottom-left of the bar.
Helper content at the bottom-right of the bar.
Icon shown at the bottom-left before the helper text.
Whether to display the completion percentage above the track.
Track height — `"default"` (12px), `"medium"` (8px) or `"small"` (6px).
Steps label shown at the top-right (e.g. `"2/8 steps"`).
Title content shown at the top-left of the bar.
Colour mode. Prefer `"brand"` or `"mono"` (V2); `"default"`/`"generic"`/`"neutral"` are legacy.
## ProgressBarItem
A single rounded segment used to compose a stepped progress indicator. Render a row of these (see `ProgressBarSteps`) to represent discrete steps.
Whether this item is filled (completed).
Pill thickness — `"default"` (8px) or `"small"` (4px).
Colour mode.
## ProgressBarSteps
A segmented (stepped) progress indicator built from `ProgressBarItem` pills. Fills the first `value` of `steps` segments.
Total number of steps (segments). Values below 1 are treated as 1.
Number of completed steps, clamped to `0`–`steps`.
Accessible label for the `progressbar` role.
Human-readable text alternative for the current value (e.g. "Step 2 of 4").
Pill thickness — `"default"` (8px) or `"small"` (4px).
Colour mode.
## Exported types
Also exported from `@fanvue/ui`: `ProgressBarItemProps`, `ProgressBarItemSize`, `ProgressBarItemVariant`, `ProgressBarProps`, `ProgressBarSize`, `ProgressBarStepsProps`, `ProgressBarVariant`.
***
**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)