@deepguide-ai/mdx

A collection of reusable MDX components for documentation sites, compatible with fumadocs, docusaurus, and other MDX-based platforms.

Installation

npm install @deepguide-ai/mdx
# or
pnpm add @deepguide-ai/mdx
# or
yarn add @deepguide-ai/mdx

Usage

With Fumadocs

// mdx-components.tsx
import defaultMdxComponents from 'fumadocs-ui/mdx';
import { defaultMDXComponents } from '@deepguide-ai/mdx';
import type { MDXComponents } from 'mdx/types';

export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...defaultMdxComponents,
    ...defaultMDXComponents,
    ...components,
  };
}

With Docusaurus

// mdx-components.tsx
import { defaultMDXComponents } from '@deepguide-ai/mdx';

export default {
  ...defaultMDXComponents,
};

With Custom MDX Setup

import { Card, CardGroup, Admonition, Steps, Step, Tabs, Tab } from '@deepguide-ai/mdx';

const components = {
  Card,
  CardGroup,
  Admonition,
  Steps,
  Step,
  Tabs,
  Tab,
};

Components

Card

Display content in a card format with optional icons, images, and call-to-action links.

<Card 
  title="Getting Started" 
  icon="star" 
  showIcon={true}
  href="https://example.com"
  callToAction="Learn more"
>
  This is the card content. You can include any markdown here.
</Card>

CardGroup

Group multiple cards in a responsive grid layout.

<CardGroup cols={2}>
  <Card title="Card 1">Content 1</Card>
  <Card title="Card 2">Content 2</Card>
</CardGroup>

Admonition

Display notes, tips, warnings, and other callouts.

<Admonition type="warning" title="Important Note">
  This is a warning message that users should pay attention to.
</Admonition>

Available types: note, tip, info, warning, danger

Steps

Create step-by-step guides with numbered steps.

<Steps>
  <Step title="Install Dependencies">
    Run `npm install` to install the required packages.
  </Step>
  <Step title="Configure Settings">
    Update your configuration file with the appropriate settings.
  </Step>
</Steps>

Tabs

Organize content in tabbed interfaces.

<Tabs defaultValue="javascript">
  <Tab value="javascript" title="JavaScript">
    ```javascript
    console.log('Hello, World!');
    ```
  </Tab>
  <Tab value="typescript" title="TypeScript">
    ```typescript
    console.log('Hello, World!' as string);
    ```
  </Tab>
</Tabs>

Styling

This package uses Tailwind CSS classes. Make sure your project has Tailwind CSS configured, or provide equivalent styles for the classes used by these components.

Customization

All components accept a className prop for custom styling, and most have additional props for customization like icons, colors, and behavior.

License

MIT