npm install fumadocs-docgen
Add the remark plugin.
import { remarkInstall } from 'fumadocs-docgen';
const config = {
remarkPlugins: [remarkInstall],
};
Define the required components.
// With Fumadocs UI
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
import type { MDXComponents } from 'mdx/types';
export function useMDXComponents(components: MDXComponents) {
return {
...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.
```package-install
my-package
```
```package-install
npm i my-package -D
```
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>
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 id="some-id" persist items={[...]}>
...
<Tabs>
