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:

• PostCSS with mantine-postcss-preset
• TypeScript
• Storybook
• Jest setup with React Testing Library
• ESLint setup with eslint-config-mantine
• Provides API example in /api/version

Nextra Features

• Nextra documentation site with Mantine theme
• Sync Dark mode between documentation and application (Mantine/Nextra)
• Customizable components in components folder
• Provides new Navigation and Footer components for Nextra documentation site

Folder structure

• components – shared components
  • you can use them in both documentation and application
  • you may customize them to fit your needs
• content – Nextra documentation site (.mdx and _meta.json files)

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 ESLint
• prettier:check – checks files with Prettier
• jest – runs jest tests
• jest:watch – starts jest watch
• test – runs jest, prettier:check, lint and typecheck scripts

Other scripts

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

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.