Mantine Next.js + Nextra template

❤️ If this component has been useful to you or your team, please consider becoming a sponsor

This is a template for Next.js app router + Mantine + Nextra documentation site.

Features

This template comes with the following features:

• Next.js 16 with App Router and Turbopack
• Mantine 9 UI component library
• Nextra 4 documentation framework with Mantine theme sync
• PostCSS with mantine-postcss-preset
• TypeScript 6
• Storybook
• Jest setup with React Testing Library
• oxlint for linting
• oxfmt for formatting
• Pagefind server-side search API
• Turbopack inline SVG loader turbopack-inline-svg-loader

Nextra Features

• Nextra documentation site with Mantine theme
• Sync Dark mode between documentation and application (Mantine/Nextra)
• Customizable components in components folder
• Custom Navigation and Footer components for Nextra documentation site
• GitHub Release Notes integration via API

Folder structure

• app – Next.js App Router pages, layouts, and API routes
• components – shared components (usable in both documentation and application)
• content – Nextra documentation site (.mdx and _meta.ts files)
• config – centralized site configuration (metadata, GitHub API, search)

npm scripts

Build and dev scripts

• dev – start dev server
• build – bundle application for production (includes pagefind search index)
• analyze – analyzes application bundle with @next/bundle-analyzer

Testing scripts

• typecheck – checks TypeScript types
• lint – runs oxlint and Stylelint
• format:test – checks files 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

Sponsor

❤️ If this component has been useful to you or your team, please consider becoming a sponsor

Your support helps me:

• Keep the project actively maintained with timely bug fixes and security updates
• Add new features, improve performance, and refine the developer experience
• Expand test coverage and documentation for smoother adoption
• Ensure long‑term sustainability without relying on ad hoc free time
• Prioritize community requests and roadmap items that matter most

Open source thrives when those who benefit can give back—even a small monthly contribution makes a real difference. Sponsorships help cover maintenance time, infrastructure, and the countless invisible tasks that keep a project healthy.

Your help truly matters.

💚 Become a sponsor today and help me keep this project reliable, up‑to‑date, and growing for everyone.