Components
Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Loading
Installation
pnpm dlx shadcn@latest add @toui/progress
Examples
Status
Loading
Circle
Loading
Radial
Spinner
Pattern
Tokens
4 CSS variables in 2 categories.
height
| CSS Variable | Value | Description |
|---|---|---|
--progress-height-sm | 0.25rem | 4px |
--progress-height-md | 0.375rem | 6px |
--progress-height-lg | 0.5rem | 8px |
radius
| CSS Variable | Value | Description |
|---|---|---|
--progress-radius | 9999px | Pill shape |
Credits
- Built with Radix UI Progress.