Utility
Terminal
Installation
$ pnpm dlx shadcn@latest add @termcn/ink/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
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" | - |
statusText | string | - |
Notes
Accessibility
termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.
- Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.