Package Install
Generate code blocks for installing packages
Usage
npm install fumadocs-docgenpnpm add fumadocs-docgenyarn add fumadocs-docgenbun add fumadocs-docgenAdd the remark plugin.
import { remarkInstall } from 'fumadocs-docgen';
import { defineConfig } from 'fumadocs-mdx/config';
export default defineConfig({
mdxOptions: {
remarkPlugins: [remarkInstall],
},
});import { compile } from '@mdx-js/mdx';
import { remarkInstall } from 'fumadocs-docgen';
await compile('...', {
remarkPlugins: [remarkInstall],
});Define the required components.
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): MDXComponents {
return {
...defaultComponents,
Tab,
Tabs,
...components,
};
}| Component | |
|---|---|
| Tabs | Accepts an array of item (items) |
| Tab | Accepts 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-packagepnpm add my-packageyarn add my-packagebun add my-packageOptions
Persistent
When using with Fumadocs UI, you can enable persistence with the persist option.
import { remarkInstall } from 'fumadocs-docgen';
import { defineConfig } from 'fumadocs-mdx/config';
const remarkInstallOptions = {
persist: {
id: 'some-id',
},
};
export default defineConfig({
mdxOptions: {
remarkPlugins: [[remarkInstall, remarkInstallOptions]],
},
});import { compile } from '@mdx-js/mdx';
import { remarkInstall } from 'fumadocs-docgen';
const remarkInstallOptions = {
persist: {
id: 'some-id',
},
};
await compile('...', {
remarkPlugins: [[remarkInstall, remarkInstallOptions]],
});This will instead generate:
<Tabs groupId="some-id" persist items={[...]}>
...
</Tabs>How is this guide?
Last updated on