Introduction

Next.js App Router + Mantine + Fumadocs starter template

Hello, world! Welcome to the Fumadocs + Mantine template.

This is a starter template for a Next.js App Router + Mantine + Fumadocs documentation site — with a docs UI built 100% with Mantine on top of the headless fumadocs-core (no Tailwind, no third-party docs theme).

Features

This template comes with the following features:

• PostCSS with mantine-postcss-preset
• TypeScript
• Storybook
• Jest setup with React Testing Library
• oxlint + Stylelint for linting and oxfmt for formatting
• Provides API examples in /api/version, /api/github-releases and /api/search

Fumadocs Features

• Fumadocs content pipeline (fumadocs-mdx) with type-safe frontmatter
• Docs UI entirely built with Mantine: sidebar, mobile drawer, breadcrumbs, table of contents with scroll-spy, previous/next navigation
• Full-text search powered by Orama and rendered with Mantine Spotlight (try ⌘K)
• Build-time syntax highlighting (Shiki) with light/dark themes following the Mantine color scheme
• GitHub alert syntax rendered with Mantine Alert
• Customizable MDX components in components/mdx

Folder structure

You will find a lot of predefined folders and files in the project. Here is a short description of the most important ones:

You can start by changing the main configuration in config/index.ts file. This file contains the most important configuration for the project.

npm scripts

Build and dev scripts

• dev – start dev server
• build – bundle application for production
• analyze – analyzes application bundle with @next/bundle-analyzer

Testing scripts

• typecheck – checks TypeScript types
• lint – runs oxlint and Stylelint
• format:test – checks files formatting with oxfmt
• jest – runs jest tests
• jest:watch – starts jest watch
• test – runs format:test, lint, typecheck and jest scripts

Other scripts

• storybook – starts storybook dev server
• storybook:build – build production storybook bundle to storybook-static
• format:write – formats all files with oxfmt