Components
Progress
A progress bar component for displaying task completion status. Built on top of Base UI Progress component.
Loading
Installation
pnpm dlx shadcn@latest add @reui/base-progress
Examples
Status
A progress bar with status messages and detailed feedback.
Loading
Sizes
Different sizes of progress bars.
Loading
Colors
Different color variants for different states.
Loading
Animated
Animated progress bars with smooth transitions and effects.
Loading
API Reference
This component is based on Base UI Progress primitive and includes the following custom props:
Progress
The root component that provides context for all progress parts.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
value | number | - | The current progress value (0-100) |
max | number | 100 | The maximum progress value |
children | ReactNode | - | The content of the progress component |
ProgressValue
The value display component for showing progress percentage.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |