refactor(docs): bump deps, migrate

docs/app/(home)/page.tsx

@@ -1,30 +1,23 @@
-import { BackgroundLines } from '@/components/ui/background-lines'
-import { HoverBorderGradient } from '@/components/ui/hover-border-gradient'
-import { Spotlight } from '@/components/ui/spotlight'
 import Link from 'fumadocs-core/link'
+import {
+  DocsBody,
+  DocsDescription,
+  DocsTitle,
+} from 'fumadocs-ui/page'
 import React from 'react'
 
 export default () => (
-  <BackgroundLines className="-mt-14 h-screen w-full rounded-md flex items-center justify-center relative overflow-hidden">
-    <Spotlight fill="white" />
-    <div className="flex flex-col items-center gap-8 p-4 max-w-7xl mx-auto relative z-10 w-full pt-20 md:pt-0">
-      <h1 className="text-4xl md:text-7xl font-bold text-center bg-clip-text text-transparent bg-gradient-to-b from-fd-foreground to-fd-muted-foreground bg-opacity-50">
+  <div className="flex w-full h-[80vh] justify-center">
+    <div className="flex flex-col my-auto p-8">
+      <DocsTitle>
         <small>extra-small</small>
         {' '}
         <span>AI SDK</span>
-        <br />
-        <small>for Browser, Node.js, Deno, Bun or Edge Runtime.</small>
-      </h1>
-      {/* <p className="mt-4 font-normal text-base text-muted-foreground max-w-lg text-center mx-auto">
-        lorem ipsum
-      </p> */}
-      <HoverBorderGradient
-        as="button"
-        className="dark:bg-black bg-white text-black dark:text-white flex items-center space-x-2"
-        containerClassName="rounded-full"
-      >
+      </DocsTitle>
+      <DocsDescription className="mb-2">for Browser, Node.js, Deno, Bun or Edge Runtime.</DocsDescription>
+      <DocsBody>
         <Link href="/docs">Get Started</Link>
-      </HoverBorderGradient>
+      </DocsBody>
     </div>
-  </BackgroundLines>
+  </div>
 )

docs/app/global.css

@@ -1,4 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
+@import "tailwindcss";
+@import 'fumadocs-ui/css/neutral.css';
+@import 'fumadocs-ui/css/preset.css';
+
+/* relative to the CSS file, make sure it's correct for your app */
+@source '../node_modules/fumadocs-ui/dist/**/*.js';

docs/app/layout.config.tsx

@@ -1,6 +1,6 @@
 import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared'
 
-import { version } from '../package.json' with { type: 'json' }
+import pkg from '../package.json' with { type: 'json' }
 
 /**
  * Shared layout configurations
@@ -24,7 +24,7 @@ export const baseOptions: BaseLayoutProps = {
         <img className="size-6 mb-0 -mr-1" src="https://github.com/moeru-ai.png" />
         <span>xsAI</span>
         <code className="py-0 px-1">
-          {version}
+          {pkg.version}
         </code>
       </div>
     ),

docs/package.json

@@ -11,27 +11,26 @@
     "start": "next start"
   },
   "dependencies": {
-    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "framer-motion": "^11.18.0",
-    "fumadocs-core": "14.5.4",
-    "fumadocs-docgen": "^1.3.2",
-    "fumadocs-mdx": "11.1.2",
-    "fumadocs-twoslash": "^2.0.1",
-    "fumadocs-typescript": "^3.0.2",
-    "fumadocs-ui": "14.5.4",
-    "lucide-react": "^0.462.0",
+    "framer-motion": "^12.0.6",
+    "fumadocs-core": "^15.0.0",
+    "fumadocs-docgen": "^1.3.5",
+    "fumadocs-mdx": "^11.1.2",
+    "fumadocs-twoslash": "^3.0.0",
+    "fumadocs-typescript": "^3.0.3",
+    "fumadocs-ui": "^15.0.0",
+    "lucide-react": "^0.474.0",
     "next": "15.0.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "tailwind-merge": "^2.5.5",
-    "tailwindcss-animate": "^1.0.7"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.1",
     "@types/mdx": "^2.0.13",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@xsai/embed": "workspace:^",
     "@xsai/generate-object": "workspace:^",
     "@xsai/generate-speech": "workspace:^",
@@ -46,7 +45,7 @@
     "@xsai/tool": "workspace:^",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.5.1",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.1",
     "valibot": "catalog:",
     "xsai": "workspace:^"
   }

docs/postcss.config.js

@@ -1,6 +1,6 @@
 export default {
   plugins: [
     'autoprefixer',
-    'tailwindcss',
+    '@tailwindcss/postcss',
   ],
 }