# Multi Progress

Parallel progress display for package managers, build pipelines, and deploy tools



<ComponentPreview base="opentui" name="multi-progress-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui-multi-progress
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource base="opentui" name="multi-progress" title="components/ui/multi-progress.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { MultiProgress } from "@/components/ui/multi-progress";
```

```tsx
<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 [#examples]

Compact Mode [#compact-mode]

<ComponentPreview base="opentui" name="multi-progress-compact" />

API Reference [#api-reference]

MultiProgress [#multiprogress]

| Prop          | Type                  | Default    |
| ------------- | --------------------- | ---------- |
| `items`       | `MultiProgressItem[]` | `required` |
| `barWidth`    | `number`              | `20`       |
| `labelWidth`  | `number`              | `20`       |
| `compact`     | `boolean`             | `false`    |
| `showPercent` | `boolean`             | `true`     |

MultiProgressItem [#multiprogressitem]

| Prop         | Type                                          | Default    |
| ------------ | --------------------------------------------- | ---------- |
| `id`         | `string`                                      | `required` |
| `label`      | `string`                                      | `required` |
| `value`      | `number`                                      | `required` |
| `total`      | `number`                                      | `required` |
| `status`     | `"pending" \| "running" \| "done" \| "error"` | -          |
| `statusText` | `string`                                      | -          |