Utility
AI
Terminal
Installation
pnpm dlx shadcn@latest add https://termcn.dev/r/progress-bar.json
Usage
import { ProgressBar } from "@/components/ui/progress-bar";<ProgressBar value={42} total={100} label="Uploading" />Examples
Custom Characters and Color
Terminal
import { ProgressBar } from "@/registry/ui/progress-bar";
export default function ProgressBarCustom() {
return <ProgressBar value={80} fillChar="=" emptyChar="-" color="#22c55e" />;
}
API Reference
ProgressBar
| Prop | Type | Default |
|---|---|---|
value | number | required |
total | number | undefined |
width | number | 30 |
showPercent | boolean | true |
showEta | boolean | false |
fillChar | string | "█" |
emptyChar | string | "░" |
color | string | undefined |
label | string | undefined |