Progress
An extended progress bar component with gradient variants, theme colors, animated fills, shine effects, size options, and over-budget styling. Wraps shadcn/ui Progress.
Installation
$ npx shadcn@latest add @orecus/progressDependencies:
motion
Registry:
progress@orecus/color-utils
Component
Progress bars with gradient variants, sizes, and animation options.
Default
Sizes
sm
md
lg
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Current progress value (0-100) |
variant | 'default' | 'gradient' | 'default' | Style variant - 'gradient' for colored gradient fill |
color | ThemeColor | 'primary' | Theme color for the gradient variant (primary, blue, green, purple, etc.) |
size | 'sm' | 'md' | 'lg' | 'md' | Height size of the progress bar |
animated | boolean | false | Animate the progress fill on mount |
shine | boolean | false | Add a shine effect animation to the progress bar |
showOverBudget | boolean | false | Apply destructive styling when value >= 100 |
className | string | — | Additional CSS classes for the progress bar |