kubestellar · naman9271 · Jan 10, 2026 · Jan 7, 2026 · Jan 7, 2026 · Jan 8, 2026
diff --git a/mdx-components.js b/mdx-components.js
@@ -1,12 +1,25 @@
-import { useMDXComponents as getThemeComponents } from "nextra-theme-docs"; // nextra-theme-blog or your custom theme
+import { DocsLayout } from './src/components/docs/DocsLayout';
+import { buildPageMap } from './src/app/docs/page-map';
 
-// Get the default MDX components
-const themeComponents = getThemeComponents();
-
-// Merge components
+// Custom MDX components without nextra-theme-docs
 export function useMDXComponents(components) {
   return {
-    ...themeComponents,
+    // Wrapper component that wraps the entire MDX content with DocsLayout
+    wrapper: ({ children, toc, metadata, sourceCode, ...props }) => {
+      const { pageMap } = buildPageMap();
+
+      return (
+        <DocsLayout pageMap={pageMap} toc={toc} metadata={metadata}>
+          {children}
+        </DocsLayout>
+      );
+    },
+    // You can add custom component mappings here
+    // Example:
+    // h1: (props) => <h1 className="custom-h1" {...props} />,
+    // h2: (props) => <h2 className="custom-h2" {...props} />,
+    // a: (props) => <a className="custom-link" {...props} />,
     ...components,
   };
 }
+
diff --git a/package.json b/package.json
@@ -22,14 +22,15 @@
   "dependencies": {
     "@react-three/drei": "^10.7.6",
     "@react-three/fiber": "^9.4.0",
+    "@theguild/remark-mermaid": "^0.3.0",
     "dotenv": "^17.2.3",
     "framer-motion": "^12.23.22",
     "lucide-react": "^0.545.0",
     "mermaid": "^11.12.1",
     "next": "^15.5.9",
     "next-intl": "^4.3.12",
-    "nextra": "^4.6.0",
-    "nextra-theme-docs": "^4.6.0",
+    "next-themes": "^0.4.6",
+    "nextra": "^4.6.1",
     "postmark": "^4.0.5",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

diff --git a/src/app/docs/layout.tsx b/src/app/docs/layout.tsx
@@ -1,6 +1,5 @@
-import { Layout } from 'nextra-theme-docs'
-import 'nextra-theme-docs/style.css'
 import { DocsNavbar, DocsFooter, DocsBanner } from '@/components/docs/index'
+import { DocsProvider } from '@/components/docs/DocsProvider'
 import { Inter, JetBrains_Mono } from "next/font/google"
 import { Suspense } from 'react'
 import { ThemeProvider } from "next-themes"
@@ -23,44 +22,30 @@ export const metadata = {
   description: 'Official documentation for KubeStellar - Multi-cluster orchestration platform',
 }
 
-const banner = <DocsBanner />
-const navbar = (
-  <Suspense fallback={<div style={{ height: '4rem' }} />}>
-    <DocsNavbar />
-  </Suspense>
-)
-const footer = <DocsFooter />
-
 type Props = {
   children: React.ReactNode
 }
 
 export default async function DocsLayout({ children }: Props) {
   // Build page map from local docs
-  const { pageMap } = buildPageMap()
+  buildPageMap();
 
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={`${inter.variable} ${jetbrainsMono.variable} antialiased`}>
         <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
-          <Layout
-            banner={banner}
-            navbar={navbar}
-            pageMap={pageMap}
-            docsRepositoryBase="https://github.com/kubestellar/docs/edit/main/docs/content"
-            footer={footer}
-            darkMode={true}
-            sidebar={{
-              defaultMenuCollapseLevel: 1,
-              toggleButton: true
-            }}
-            toc={{
-              float: true,
-              title: "On This Page"
-            }}
-          >
-            {children}
-          </Layout>
+          <DocsProvider>
+            <div className="flex flex-col min-h-screen">
+              <DocsBanner />
+              <Suspense fallback={<div className="h-16" />}>
+                <DocsNavbar />
+              </Suspense>
+              <main className="flex-1">
+                {children}
+              </main>
+              <DocsFooter />
+            </div>
+          </DocsProvider>
         </ThemeProvider>
       </body>
     </html>