Package Install

Generate code blocks for installing packages

Usage

npm install fumadocs-docgen

Add the remark plugin.

import { remarkInstall } from 'fumadocs-docgen';
 
const config = {
  remarkPlugins: [remarkInstall],
};

Define the required components.

page.tsx (Fumadocs UI)
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 
<MDX
  components={{
    Tab,
    Tabs,
  }}
/>;
Component
TabsAccept an array of item (items)
TabAccept the name of item (value)

Create code blocks with package-install as language.

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

Output

The following structure should be generated by the plugin.

<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
  <Tab value="npm">...</Tab>
  <Tab value="pnpm">...</Tab>
  <Tab value="yarn">...</Tab>
  <Tab value="bun">...</Tab>
<Tabs>
npm install my-package

Options

Persistent

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

import { remarkInstall } from 'fumadocs-docgen';
 
const config = {
  remarkPlugins: [
    [
      remarkInstall,
      {
        persist: {
          id: 'some-id',
        },
      },
    ],
  ],
};

This will instead generate:

<Tabs groupId="some-id" persist items={[...]}>
  ...
<Tabs>
Edit on GitHub

Last updated on

On this page