Utility
AI
Terminal
Installation
pnpm dlx shadcn@latest add https://termcn.dev/r/multi-progress.json
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
import { MultiProgress } from "@/registry/ui/multi-progress";
export default function MultiProgressCompact() {
return (
<MultiProgress
compact
items={[
{ id: "1", label: "eslint", status: "running", total: 100, value: 50 },
{ id: "2", label: "tsc", status: "done", total: 100, value: 100 },
]}
/>
);
}
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 |