Mantine Next.js + Nextra Template

The Mantine Next.js + Nextra template is a starter repository that combines the Next.js 16 App Router with the Mantine 9 component library and a Nextra 4 documentation site, so an application and its docs live in one codebase with a shared theme and dark mode.

What is the Mantine Next.js + Nextra template?

It is a documented project scaffold for building a Next.js app alongside a Nextra-based documentation site, maintained by GitHub user gfazioli. You start from its folder layout, drop your own pages into the App Router and your documentation into .mdx files, and run the included npm scripts to produce a production bundle that also contains a Pagefind search index. The output is a single deployable Next.js application whose docs section is themed with Mantine rather than the default Nextra look.

What makes it stand out?

• Next.js 16 with App Router and Turbopack — pages, layouts, and API routes live in the app directory and are bundled with Turbopack.
• Mantine 9 UI library — component styling comes from Mantine, wired through PostCSS with mantine-postcss-preset.
• Nextra 4 documentation with Mantine theme sync — documentation content is written as .mdx files with _meta.ts navigation files, and dark mode is synchronized between the Mantine application and the Nextra docs.
• Shared component folder — the components directory holds components usable in both the application and the documentation site, plus custom Nextra Navigation and Footer components.
• TypeScript 6 with oxlint and oxfmt — type checking, linting (oxlint plus Stylelint), and formatting (oxfmt) are separate scripts.
• Storybook and Jest with React Testing Library — component stories run via storybook, and a production Storybook bundle is written to storybook-static; Jest runs with a watch mode.
• Pagefind server-side search — a search index is generated as part of the build script and served through a server-side search API.
• GitHub Release Notes integration via API — release notes are pulled through the GitHub API, configured centrally in the config folder alongside site metadata and search settings.
• Turbopack inline SVG loader — turbopack-inline-svg-loader handles SVG imports inline.

Who should use this template?

• Documentation-heavy product teams: ship a product app and its user guide from one Next.js repository instead of maintaining a separate docs site.
• Component library authors: showcase components in Storybook while publishing MDX docs and a changelog driven by GitHub Release Notes.
• Mantine developers: start a new App Router project that already has Mantine 9, PostCSS preset configuration, and dark mode working with Nextra.
• Solo maintainers: adopt a repo that ships linting, formatting, type checking, and tests as ready-made npm scripts.

What can you do with the template?

• Ship an app plus docs: write App Router pages under app and documentation pages under content, and both appear in one Next.js deployment.
• Run a documented component showcase: keep reusable components in components, add Storybook stories, and reference the same components inside MDX docs.
• Search your documentation: the Pagefind index built during build gives the docs site a server-side search API.
• Audit bundle size: the analyze script inspects the application bundle with @next/bundle-analyzer.

How does the template work?

Clone the repository, then run dev to start the Next.js dev server; documentation lives in the content folder and shared components in components. Before shipping, build bundles the application and generates the Pagefind search index, while test chains format:test, lint, typecheck, and jest.

Pricing

The template is a free, open-source repository. The author offers an optional GitHub Sponsors page to fund maintenance, bug fixes, and new features; no paid tiers gate any of the listed functionality.

FAQ

Which versions of Next.js, Mantine, and Nextra does this template use?

It targets Next.js 16 with the App Router and Turbopack, Mantine 9 for UI components, and Nextra 4 for the documentation site. TypeScript 6 is used throughout, and PostCSS is configured with the Mantine PostCSS preset.

Is this template free to use?

Yes. It is a public template repository, and sponsorship through GitHub Sponsors is optional rather than required. The sponsorship page states that contributions fund maintenance, security updates, test coverage, and documentation.

Does the documentation site have search?

Yes. Search is powered by Pagefind through a server-side search API, and the search index is generated when you run the build script, so it is part of the production output.

Can I reuse the same components in the app and the docs?

The components folder is intentionally shared between the Next.js application and the Nextra documentation site. The template also ships custom Navigation and Footer components specifically for the Nextra docs, and dark mode stays in sync across both.