---
title: Package Install
description: Generate code blocks for installing packages
---

## Usage

```package-install
fumadocs-docgen
```

Add the remark plugin.

```ts
import { remarkInstall } from 'fumadocs-docgen';

const config = {
  remarkPlugins: [remarkInstall],
};
```

Define the required components.

```tsx title="page.tsx (Fumadocs UI)"
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';

<MDX
  components={{
    Tab,
    Tabs,
  }}
/>;
```

| Component |                                   |
| --------- | --------------------------------- |
| Tabs      | Accept an array of item (`items`) |
| Tab       | Accept the name of item (`value`) |

Create code blocks with `package-install` as language.

````mdx
```package-install
my-package
```

```package-install
npm i my-package -D
```
````

### Output

The following structure should be generated by the plugin.

```mdx
<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
  <Tab value="npm">...</Tab>
  <Tab value="pnpm">...</Tab>
  <Tab value="yarn">...</Tab>
  <Tab value="bun">...</Tab>
<Tabs>
```

```package-install
my-package
```

## Options

### Persistent

When using with Fumadocs UI, you can enable persistent with the `persist` option.

```ts
import { remarkInstall } from 'fumadocs-docgen';

const config = {
  remarkPlugins: [
    [
      remarkInstall,
      {
        persist: {
          id: 'some-id',
        },
      },
    ],
  ],
};
```

This will instead generate:

```mdx
<Tabs groupId="some-id" persist items={[...]}>
  ...
<Tabs>
```
