Utility
AI
Terminal
multi-progress-demo
No opentui live preview is registered for this example yet.
Installation
pnpm dlx shadcn@latest add @termcn/multi-progress
Usage
import { MultiProgress } from "@/components/ui/multi-progress";<MultiProgress
items={[
{
id: "api",
label: "API Server",
value: 80,
total: 100,
status: "running",
},
{ id: "db", label: "Database", value: 100, total: 100, status: "done" },
{ id: "cache", label: "Redis", value: 30, total: 100, status: "running" },
]}
/>Examples
Compact Mode
Terminal
multi-progress-compact
No opentui live preview is registered for this example yet.
API Reference
MultiProgress
| Prop | Type | Default |
|---|---|---|
items | MultiProgressItem[] | required |
barWidth | number | 20 |
labelWidth | number | 20 |
compact | boolean | false |
showPercent | boolean | true |
MultiProgressItem
| Prop | Type | Default |
|---|---|---|
id | string | required |
label | string | required |
value | number | required |
total | number | required |
status | "pending" | "running" | "done" | "error" | undefined |
statusText | string | undefined |