# InstallCommand

> The install line a docs page prints for its packages, spelled by each package manager in a synced set of code tabs: a reader who picks Bun once sees Bun in every install line, on this page and the next.

```ts
import { InstallCommand } from "@sdxc/ui/docs";
```

Renders one terminal block per manager inside a synced CodeTabs.

## Examples

```tsx
<InstallCommand packages={["@sdxc/ui"]} title={t("terminal")} aria-label={t("packageManager")} labels={{ copy: t("copy"), copied: t("copied") }} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `packages` | `readonly string[]` | Package specifiers to install, such as `["@sdxc/ui", "remix@3.1.0"]`. |
| `dev?` | `boolean` | Installs them as development dependencies. |
| `syncKey?` | `string` | Defaults to `package-manager`, so every install line on the site follows one choice. |
| `persist?` | `CodeTabsPersistence` | Where the choice is remembered; see `CodeTabs`. Defaults to `local`. |
| `selected?` | `string` | The manager to render selected, such as the one a cookie remembered. |
| `managers?` | `readonly Manager[]` | The managers to offer, in order. Defaults to npm, pnpm, yarn and bun. |
| `title?` | `string` | The header each block reads as, such as "Terminal". |
| `labels` | `CodeBlock.Labels` |  |
| `"aria-label"` | `string` | Names the strip for assistive technology, such as "Package manager". |

Also accepts everything in `Omit<TagProps<"form">, "children" | "aria-label" | "title">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Manager` | `"npm" \| "pnpm" \| "yarn" \| "bun"` | A package manager the strip offers, which is also the value its sync key stores. |

## Also exported

- `installLine`