feat: add custom MDX components for enhanced documentation rendering

Author: hotlong

packages/site/app/[lang]/docs/[[...slug]]/page.tsx

@@ -3,6 +3,10 @@ import type { Metadata } from 'next';
 import { DocsPage, DocsBody } from 'fumadocs-ui/page';
 import { notFound } from 'next/navigation';
 import { siteConfig } from '@/lib/site-config';
+import defaultComponents from 'fumadocs-ui/mdx';
+import { Steps, Step } from 'fumadocs-ui/components/steps';
+import { Card, Cards } from 'fumadocs-ui/components/card';
+import { Callout } from 'fumadocs-ui/components/callout';
 
 interface PageProps {
   params: Promise<{
@@ -39,7 +43,7 @@ export default async function Page({ params }: PageProps) {
       } : undefined}
     >
       <DocsBody>
-        <MDX />
+        <MDX components={{ ...defaultComponents, Steps, Step, Card, Cards, Callout }} />
       </DocsBody>
     </DocsPage>
   );

packages/site/mdx-components.tsx

@@ -1,12 +1,17 @@
 import defaultComponents from 'fumadocs-ui/mdx';
 import type { MDXComponents } from 'mdx/types';
 import { Steps, Step } from 'fumadocs-ui/components/steps';
+import { Card, Cards } from 'fumadocs-ui/components/card';
+import { Callout } from 'fumadocs-ui/components/callout';
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     ...defaultComponents,
     Steps,
     Step,
+    Card,
+    Cards,
+    Callout,
     ...components,
   };
 }