Package Install

Usage

npm install fumadocs-docgen

Add the remark plugin.

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

Define the Tab component.

mdx-components.tsx

import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 
export function useMDXComponents(components: MDXComponents) {
  return {
    ...components,
    Tab,
    Tabs,
  };
}

Create code blocks with package-install as language.

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

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

Usage

Output

On this page