Custom Components

Use this guide to add your own MDX components in the current DocuBook setup.

Current Flow

1. 1
   Step 1: Create a custom component in lib/mdx
   lib/mdx/Callout.tsx

   CopyReady to copy code

   export default function Callout({ children }: { children: React.ReactNode }) {
     return (
       <div className="rounded-md border px-4 py-3">
         {children}
       </div>
     );
   }
   

2. 2
   Step 2: Register it in lib/mdx/index.ts
   lib/mdx/index.ts

   CopyReady to copy code

   import type { MdxComponentMap } from "@docubook/mdx-content";
   import Outlet from "@/lib/mdx/Outlet";
   import Callout from "@/lib/mdx/Callout";
   
   export const customMdxComponents: MdxComponentMap = {
     Outlet,
     Callout,
   };
   

3. 3
   Step 3: Merge custom and built-in components in lib/mdx-components.ts
   lib/mdx-components.ts

   CopyReady to copy code

   import { createMdxComponents } from "@docubook/mdx-content";
   import { customMdxComponents } from "@/lib/mdx";
   
   export const mdxComponents = createMdxComponents({
     ...builtInOverrides,
     ...customMdxComponents,
   });
   

4. 4
   Step 4: Use your custom component in MDX
   docs/example.mdx

   CopyReady to copy code

   <Callout>
     This content is rendered by a custom MDX component.
   </Callout>
   

Folder Structure

Recommended structure for this flow:

Notes

• Do not register custom components in lib/markdown.ts.
• Keep all custom component registration in lib/mdx/index.ts.
• Keep all MDX map composition in lib/mdx-components.ts.