🚀 Premium Docs Starter Kit

A professional, high-performance documentation starter kit built with Next.js 15, Fumadocs, and Tailwind CSS 4. Designed for developers who want to ship beautiful documentation in minutes.

✨ Features

• ⚡ Blazing Fast: Powered by Next.js 15 App Router and Fumadocs.
• 🎨 Tailwind CSS 4: Utilizes the latest styling engine for modern design.
• 📄 MDX Support: Write documentation using MDX with full TypeScript support.
• 🔍 Full-text Search: Pre-configured search functionality.
• 📱 Responsive Design: Fully responsive and mobile-friendly layouts.
• 🌓 Dark Mode: Seamless light and dark mode integration.
• 🛠️ SEO Optimized: Ready-to-go meta tags and semantic HTML.
• 🧩 Reusable Components: Collection of built-in components for your docs.

🛠️ Tech Stack

• Framework: Next.js 15
• Documentation Engine: Fumadocs
• Styling: Tailwind CSS 4
• Icons: Lucide React
• Components: Radix UI
• Animations: Lenis

🚀 Getting Started

1. Clone the repository

git clone https://github.com/Deveripon/fuma-docs-starter.git
cd fuma-docs-starter

2. Install dependencies

npm install
# or
pnpm install
# or
bun install

3. Run development server

npm run dev

Open http://localhost:3000 with your browser to see the result.

📂 Project Structure

├── app/               # Next.js App Router
│   ├── (home)/        # Landing page routes
│   └── docs/          # Documentation layout and pages
├── content/           # MDX Documentation content
│   └── docs/          # Actual documentation files (.mdx)
├── lib/               # Utility functions and shared config
├── components/        # React components
├── public/            # Static assets
└── source.config.ts   # Fumadocs configuration

📝 Customizing Content

Adding new pages

Add .mdx files to the content/docs directory. Use frontmatter to define the title and description:

---
title: My New Page
description: This is a description of my new page
icon: Terminal
---

# Your Content Here

Organizing with Folders

To create nested navigation, add folders in content/docs and include a meta.json file to control the order and icons:

{
    "title": "Essentials",
    "pages": ["installation", "configuration"]
}

🎨 Personalization

• Branding: Update the logo and title in lib/layout.shared.tsx.
• Colors: Customize your colors in app/globals.css.
• Favicon: Replace public/favicon.ico.

🚢 Deployment

The easiest way to deploy is using Vercel:

1. Push your code to GitHub.
2. Import the project in Vercel.
3. The build command is npm run build.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

---

Built with ❤️ by Deveripon

fuma-docs-starter