Package Install

Deprecated

Use Remark NPM instead. It is a drop-in replacement, enabled by default in Fumadocs MDX.

Usage

npm install fumadocs-docgen

remarkInstall is a remark plugin with no Sätteri version. Add it, and disable Remark NPM which handles package-install code blocks first:

source.config.ts

import { remarkInstall } from 'fumadocs-docgen';
import { defineConfig } from 'fumadocs-mdx/config';

export default defineConfig({
  mdxOptions: {
    remarkNpmOptions: false,
    remarkPlugins: [remarkInstall],
  },
});

Define the required components.

components/mdx.tsx

import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
import defaultComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';

export function getMDXComponents(components?: MDXComponents) {
  return {
    ...defaultComponents,
    Tab,
    Tabs,
    ...components,
  } satisfies MDXComponents;
}

Create code blocks with package-install as language.

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

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

Output

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

Options

Persistent

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

source.config.ts

import { remarkInstall } from 'fumadocs-docgen';
import { defineConfig } from 'fumadocs-mdx/config';

export default defineConfig({
  mdxOptions: {
    remarkNpmOptions: false,
    remarkPlugins: [[remarkInstall, { persist: { id: 'some-id' } }]],
  },
});

This will instead generate:

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

UsageCopy Anchor Link

OutputCopy Anchor Link

OptionsCopy Anchor Link

PersistentCopy Anchor Link

On this page

Usage

Output

Options

Persistent