Progress
A flat progress bar — thick navy border, pastel blue fill. Supports an
optional label, percentage showValue, and a trailingLabel for unit text.
The indicator color can be swapped via indicatorClassName.
progress-demo.app
Loading assets33%
Upload progress66%24 / 36 MB
Installation
terminal.sh
npx y2kui@latest add progressUsage
import { Progress } from "@/components/ui/progress"Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current value. |
max | number | 100 | Maximum value. |
label | ReactNode | — | Optional label shown above the bar. |
showValue | boolean | false | Show the current percentage to the right of the label. |
trailingLabel | ReactNode | — | Right-aligned hint text (e.g. '24 / 36 MB'). |
indicatorClassName | string | — | Override the indicator fill color (e.g. 'bg-[#8ff0d0]'). |
wrapperClassName | string | — | Classes for the outer wrapper when label/value are shown. |