SameerJS6 · SameerJS6 · Mar 16, 2025 · Mar 16, 2025 · Mar 16, 2025 · Mar 16, 2025
diff --git a/.gitignore b/.gitignore
@@ -39,3 +39,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+
+# Fumadocs
+.source
diff --git a/app/(docs)/docs/[[...slug]]/page.tsx b/app/(docs)/docs/[[...slug]]/page.tsx
@@ -0,0 +1,37 @@
+import { source } from "@/lib/source";
+import { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { DocsBody, DocsDescription, DocsPage, DocsTitle } from "fumadocs-ui/page";
+import defaultMdxComponents from "fumadocs-ui/mdx";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+export async function generateStaticParams() {
+  return source.generateParams();
+}
+
+export async function generateMetadata(props: { params: Promise<{ slug?: string[] }> }): Promise<Metadata> {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+
+  if (!page) notFound();
+
+  return { title: page.data.title, description: page.data.description };
+}
+
+export default async function DocIndividualPage(props: { params: Promise<{ slug?: string[] }> }) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+
+  if (!page) notFound();
+
+  const MDXContent = page.data.body;
+
+  return (
+    <DocsPage toc={page.data.toc} full={page.data.full}>
+      <DocsTitle>{page.data.title}</DocsTitle>
+      <DocsDescription>{page.data.description}</DocsDescription>
+      <DocsBody>
+        <MDXContent components={{ ...defaultMdxComponents, Tab, Tabs }} />
+      </DocsBody>
+    </DocsPage>
+  );
+}
diff --git a/app/(docs)/layout.tsx b/app/(docs)/layout.tsx
@@ -0,0 +1,16 @@
+import React, { PropsWithChildren } from "react";
+import { DocsLayout } from "fumadocs-ui/layouts/docs";
+import { source } from "@/lib/source";
+
+export default function DocLayout({ children }: PropsWithChildren) {
+  return (
+    <DocsLayout
+      githubUrl="https://github.com/SameerJS6"
+      sidebar={{ hideSearch: true, defaultOpenLevel: 1 }}
+      nav={{ title: "Native-modal" }}
+      tree={source.pageTree}
+    >
+      {children}
+    </DocsLayout>
+  );
+}
diff --git a/app/globals.css b/app/globals.css
@@ -70,6 +70,6 @@
     @apply border-border;
   }
   body {
-    @apply !bg-background font-inter text-foreground selection:bg-foreground selection:text-background;
+    @apply font-inter text-foreground selection:bg-foreground selection:text-background;
   }
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,6 +3,7 @@ import { ThemeProvider } from "@/components/theme-provider";
 import ThemeToggle from "@/components/theme-toggle";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import { RootProvider } from "fumadocs-ui/provider";
 
 const inter = Inter({
   variable: "--font-inter",
@@ -22,14 +23,16 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={`${inter.variable} antialiased`}>
-        <ThemeProvider enableSystem attribute="class" defaultTheme="dark" disableTransitionOnChange>
-          <div data-vaul-drawer-wrapper="">
-            <div className="absolute right-4 top-4 flex items-center gap-2">
-              <ThemeToggle />
+        <RootProvider>
+          <ThemeProvider enableSystem attribute="class" defaultTheme="dark" disableTransitionOnChange>
+            <div data-vaul-drawer-wrapper="">
+              <div className="absolute right-4 top-4 z-50 flex items-center gap-2 max-lg:hidden">
+                <ThemeToggle />
+              </div>
+              {children}
             </div>
-            {children}
-          </div>
-        </ThemeProvider>
+          </ThemeProvider>
+        </RootProvider>
       </body>
     </html>
   );

diff --git a/lib/source.ts b/lib/source.ts
@@ -0,0 +1,7 @@
+import { docs } from "@/.source";
+import { loader } from "fumadocs-core/source";
+
+export const source = loader({
+  baseUrl: "/docs",
+  source: docs.toFumadocsSource(),
+});
diff --git a/next.config.mjs b/next.config.mjs
@@ -0,0 +1,14 @@
+// @ts-check
+
+import { createMDX } from "fumadocs-mdx/next";
+
+const withMDX = createMDX();
+
+/**
+ * @type {import('next').NextConfig}
+ */
+const config = {
+  reactStrictMode: true,
+};
+
+export default withMDX(config);
diff --git a/next.config.ts b/next.config.ts
diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "postinstall": "fumadocs-mdx"
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.1.4",
@@ -16,6 +17,9 @@
     "@radix-ui/react-slot": "^1.1.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "fumadocs-core": "^14.7.7",
+    "fumadocs-mdx": "^11.5.6",
+    "fumadocs-ui": "^14.7.7",
     "lucide-react": "^0.477.0",
     "next": "15.2.1",
     "next-themes": "^0.4.4",
@@ -28,6 +32,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@types/mdx": "^2.0.13",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
@@ -37,7 +42,7 @@
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "3.4.1",
+    "tailwindcss": "3.4.14",
     "typescript": "^5"
   }
 }