modern-docs-template

✨ Check out the live demo by clicking here!

⚙️ Getting Started

Install dependencies and run the development server:

$ git clone https://github.com/rit3zh/modern-docs-template
$ cd modern-docs-template

Running the development server

$ pnpm install
$ pnpm dev

Visit http://localhost:3000 in your browser.

📁 Project Structure

.
├── app/
│   ├── (home)/              # Landing and custom pages
│   ├── docs/                # MDX-based documentation
│   └── api/search/          # Search API route
├── lib/source.ts            # Fumadocs content adapter (loader)
├── layout.config.tsx        # Layout options
├── source.config.ts         # MDX config (frontmatter, sidebar, etc.)

---

✍️ How to Write Docs

1. Create .mdx pages inside the app/docs/ folder. Example:

   app/docs/guide/getting-started.mdx
   

2. Customize sidebar, groups, and ordering in source.config.ts using defineConfig().

3. Use Fumadocs UI components directly in your MDX:

   import { Card } from "fumadocs-ui/components/card";
   
   <Card title="Welcome" href="/docs/start" />
   

Learn more in the Fumadocs MDX Guide →

---

🛠 Customization

Feature	How to Customize
Branding	Update logo, favicon, meta in app/layout.tsx
Navigation	Edit sidebar/nav in source.config.ts
Theme	Light/dark support is built-in
Search	Tweak app/api/search/route.ts for search behavior

---

📚 Learn More

• 🔗 Fumadocs Documentation
• 🔗 Next.js Documentation
• 🔗 Learn Next.js

---

💬 Community & Support

• 🐙 GitHub: github.com/rit3zh/modern-doc-template
• 💬 Discord: Rit3zh
• ☕ Buy Me a Coffee: buymeacoffee.com/rit3zh

Built with ❤️ by rit3zh — clean, fast, and fully extensible.