feat(www): fumadocs mdx

apps/www/.source/index.ts

@@ -0,0 +1,5 @@
+// @ts-nocheck -- skip type checking
+import * as docs_0 from "../content/docs/index.mdx?collection=docs&hash=1750906540325"
+import { _runtime } from "fumadocs-mdx"
+import * as _source from "../source.config"
+export const docs = _runtime.docs<typeof _source.docs>([{ info: {"path":"index.mdx","absolutePath":"/home/moonlitgrace/Projects/headcn-ui/apps/www/content/docs/index.mdx"}, data: docs_0 }], [])

apps/www/.source/source.config.mjs

@@ -0,0 +1,8 @@
+// source.config.ts
+import { defineDocs } from "fumadocs-mdx/config";
+var docs = defineDocs({
+  dir: "content/docs"
+});
+export {
+  docs
+};

apps/www/content/docs/index.mdx

@@ -0,0 +1,7 @@
+---
+title: Hello World
+---
+
+## Introduction
+
+I love Anime.

apps/www/next.config.ts

@@ -1,5 +1,7 @@
 import type { NextConfig } from "next"
+import { createMDX } from "fumadocs-mdx/next"
 
+const withMDX = createMDX()
 const nextConfig: NextConfig = {
   // production-only settings
   ...(process.env.NODE_ENV === "production" && {
@@ -11,4 +13,4 @@ const nextConfig: NextConfig = {
   basePath: "/ui",
 }
 
-export default nextConfig
+export default withMDX(nextConfig)

apps/www/package.json

@@ -8,14 +8,18 @@
     "start": "next start",
     "lint": "next lint",
     "format:check": "prettier --check . --ignore-path ../../.gitignore",
-    "format:write": "prettier --write . --ignore-path ../../.gitignore"
+    "format:write": "prettier --write . --ignore-path ../../.gitignore",
+    "postinstall": "fumadocs-mdx"
   },
   "prettier": "@repo/prettier-config",
   "dependencies": {
     "@headlessui/react": "^2.2.4",
     "@heroicons/react": "^2.2.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "fumadocs-core": "^15.5.4",
+    "fumadocs-mdx": "^11.6.9",
+    "fumadocs-ui": "^15.5.4",
     "next": "15.3.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -26,6 +30,7 @@
     "@repo/prettier-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@tailwindcss/postcss": "^4",
+    "@types/mdx": "^2.0.13",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

apps/www/source.config.ts

@@ -0,0 +1,5 @@
+import { defineDocs } from "fumadocs-mdx/config"
+
+export const docs = defineDocs({
+  dir: "content/docs",
+})

apps/www/src/app/docs/[[...slug]]/page.tsx

@@ -0,0 +1,48 @@
+import { notFound } from "next/navigation"
+import {
+  DocsBody,
+  DocsDescription,
+  DocsPage,
+  DocsTitle,
+} from "fumadocs-ui/page"
+
+import { source } from "@/lib/source"
+import { getMDXComponents } from "@/components/mdx-components"
+
+export default async function Page(props: {
+  params: Promise<{ slug?: string[] }>
+}) {
+  const params = await props.params
+  const page = source.getPage(params.slug)
+  if (!page) notFound()
+
+  const MDX = page.data.body
+
+  return (
+    <DocsPage toc={page.data.toc} full={page.data.full}>
+      <DocsTitle>{page.data.title}</DocsTitle>
+      <DocsDescription>{page.data.description}</DocsDescription>
+      <DocsBody>
+        <p>{page.data.content}</p>
+        <MDX components={getMDXComponents()} />
+      </DocsBody>
+    </DocsPage>
+  )
+}
+
+export async function generateStaticParams() {
+  return source.generateParams()
+}
+
+export async function generateMetadata(props: {
+  params: Promise<{ slug?: string[] }>
+}) {
+  const params = await props.params
+  const page = source.getPage(params.slug)
+  if (!page) notFound()
+
+  return {
+    title: page.data.title,
+    description: page.data.description,
+  }
+}

apps/www/src/app/docs/layout.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react"
+import { DocsLayout } from "fumadocs-ui/layouts/docs"
+
+import { source } from "@/lib/source"
+import { baseOptions } from "@/app/layout.config"
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <DocsLayout
+      tree={source.pageTree}
+      sidebar={{ enabled: false }}
+      nav={{
+        enabled: false,
+      }}
+      {...baseOptions}
+    >
+      {children}
+    </DocsLayout>
+  )
+}

apps/www/src/app/globals.css

@@ -1,4 +1,6 @@
 @import "tailwindcss";
+@import "fumadocs-ui/css/neutral.css";
+@import "fumadocs-ui/css/preset.css";
 
 @custom-variant dark (&:is(.dark *));
 @custom-variant fixed (&:is(.layout-fixed *));

apps/www/src/app/layout.config.ts

@@ -0,0 +1,7 @@
+import { BaseLayoutProps } from "fumadocs-ui/layouts/shared"
+
+export const baseOptions: BaseLayoutProps = {
+  nav: {
+    enabled: false,
+  },
+}

apps/www/src/app/layout.tsx

@@ -1,8 +1,9 @@
 import type { Metadata } from "next"
+import { RootProvider } from "fumadocs-ui/provider"
 
+import { cn } from "@/lib/utils"
 import Footer from "@/components/footer"
 import Header from "@/components/header"
-import { cn } from "@/lib/utils"
 
 import { inter } from "./fonts"
 
@@ -19,15 +20,15 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en" className="dark">
+    <html lang="en" className="dark" suppressHydrationWarning>
       <body className={cn(inter.className, "relative bg-black antialiased")}>
         <div className="absolute inset-0 top-0 -z-20 bg-[url(/ui/media/bg-top.jpg)] bg-position-[35%_top] bg-no-repeat sm:bg-position-[38%_top] md:bg-position-[40%_top] lg:bg-position-[44%_top] xl:bg-top forced-colors:hidden"></div>
         <div className="absolute inset-0 -z-10 bg-[url(/ui/media/bg-noise.png)] opacity-10 forced-colors:hidden"></div>
         <div className="absolute inset-0 bottom-0 -z-30 bg-[url(/ui/media/bg-bottom.jpg)] bg-position-[35%_bottom] bg-no-repeat mix-blend-screen sm:bg-position-[38%_bottom] md:bg-position-[40%_bottom] lg:bg-position-[44%_bottom] xl:bg-bottom forced-colors:hidden"></div>
 
         <main className="flex flex-col">
           <Header />
-          {children}
+          <RootProvider>{children}</RootProvider>
           <Footer />
         </main>
       </body>

apps/www/src/components/mdx-components.tsx

@@ -0,0 +1,9 @@
+import defaultMdxComponents from "fumadocs-ui/mdx"
+import type { MDXComponents } from "mdx/types"
+
+export function getMDXComponents(components?: MDXComponents): MDXComponents {
+  return {
+    ...defaultMdxComponents,
+    ...components,
+  }
+}

apps/www/src/lib/source.ts

@@ -0,0 +1,7 @@
+import { docs } from "@/.source"
+import { loader } from "fumadocs-core/source"
+
+export const source = loader({
+  baseUrl: "/ui/docs",
+  source: docs.toFumadocsSource(),
+})

apps/www/tsconfig.json

@@ -9,7 +9,8 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"],
-      "@/public/*": ["./public/*"]
+      "@/public/*": ["./public/*"],
+      "@/.source": ["./.source/index"]
     },
     "target": "ES2017",
     "lib": ["dom", "dom.iterable", "esnext"],