VercelLogotypeVercelLogotype
LoginSign Up

MantineUI + Nextra

Get started with beautiful documentation on the Next.js App Router, Nextra, and MantineUI

DeployView Demo
This is an auto-uploaded thumbnail from https://vercel.com/templates/submit.

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.

GitHub Repogfazioli/next-app-nextra-template
LicenseView License
Use Cases
Documentation
Stack
Next.js
CSS Modules

Related Templates

Nextra: Docs Starter Kit

Simple, powerful and flexible markdown-powered docs site. Built with Next.js.
Nextra: Docs Starter Kit thumbnail

Get Started

  • Templates
  • Supported frameworks
  • Marketplace
  • Domains

Build

  • Next.js on Vercel
  • Turborepo
  • v0

Scale

  • Content delivery network
  • Fluid compute
  • CI/CD
  • Observability
  • AI GatewayNew
  • Vercel AgentNew

Secure

  • Platform security
  • Web Application Firewall
  • Bot management
  • BotID
  • SandboxNew

Resources

  • Pricing
  • Customers
  • Enterprise
  • Articles
  • Startups
  • Solution partners

Learn

  • Docs
  • Blog
  • Changelog
  • Knowledge Base
  • Academy
  • Community

Frameworks

  • Next.js
  • Nuxt
  • Svelte
  • Nitro
  • Turbo

SDKs

  • AI SDK
  • Workflow SDKNew
  • Flags SDK
  • Chat SDK
  • Streamdown AINew

Use Cases

  • Composable commerce
  • Multi-tenant platforms
  • Web apps
  • Marketing sites
  • Platform engineers
  • Design engineers

Company

  • About
  • Careers
  • Help
  • Press
  • Legal
  • Privacy Policy

Community

  • Open source program
  • Events
  • Shipped on Vercel
  • GitHub
  • LinkedIn
  • X
  • YouTube

Loading status…

Select a display theme:
    • AI Cloud
      • AI Gateway

        One endpoint, all your models

      • Sandbox

        Isolated, safe code execution

      • Vercel Agent

        An agent that knows your stack

      • AI SDK

        The AI Toolkit for TypeScript

      • v0

        Build applications with AI

    • Core Platform
      • CI/CD

        Helping teams ship 6× faster

      • Content Delivery

        Fast, scalable, and reliable

      • Fluid Compute

        Servers, in serverless form

      • Workflow

        Long-running workflows at scale

      • Observability

        Trace every step

    • Security
      • Bot Management

        Scalable bot protection

      • BotID

        Invisible CAPTCHA

      • Platform Security

        DDoS Protection, Firewall

      • Web Application Firewall

        Granular, custom protection

    • Company
      • Customers

        Trusted by the best teams

      • Blog

        The latest posts and changes

      • Changelog

        See what shipped

      • Press

        Read the latest news

      • Events

        Join us at an event

    • Learn
      • Docs

        Vercel documentation

      • Academy

        Linear courses to level up

      • Knowledge Base

        Find help quickly

      • Community

        Join the conversation

    • Open Source
      • Next.js

        The native Next.js platform

      • Nuxt

        The progressive web framework

      • Svelte

        The web’s efficient UI framework

      • Turborepo

        Speed with Enterprise scale

    • Use Cases
      • AI Apps

        Deploy at the speed of AI

      • Composable Commerce

        Power storefronts that convert

      • Marketing Sites

        Launch campaigns fast

      • Multi-tenant Platforms

        Scale apps with one codebase

      • Web Apps

        Ship features, not infrastructure

    • Tools
      • Marketplace

        Extend and automate workflows

      • Templates

        Jumpstart app development

      • Partner Finder

        Get help from solution partners

    • Users
      • Platform Engineers

        Automate away repetition

      • Design Engineers

        Deploy for every idea

  • Enterprise
  • Pricing
Log InContact
Sign Up
Sign Up
DeployView Demo
AI Gateway

One endpoint, all your models

Sandbox

Isolated, safe code execution

Vercel Agent

An agent that knows your stack

AI SDK

The AI Toolkit for TypeScript

v0

Build applications with AI

CI/CD

Helping teams ship 6× faster

Content Delivery

Fast, scalable, and reliable

Fluid Compute

Servers, in serverless form

Workflow

Long-running workflows at scale

Observability

Trace every step

Bot Management

Scalable bot protection

BotID

Invisible CAPTCHA

Platform Security

DDoS Protection, Firewall

Web Application Firewall

Granular, custom protection

Customers

Trusted by the best teams

Blog

The latest posts and changes

Changelog

See what shipped

Press

Read the latest news

Events

Join us at an event

Docs

Vercel documentation

Academy

Linear courses to level up

Knowledge Base

Find help quickly

Community

Join the conversation

Next.js

The native Next.js platform

Nuxt

The progressive web framework

Svelte

The web’s efficient UI framework

Turborepo

Speed with Enterprise scale

AI Apps

Deploy at the speed of AI

Composable Commerce

Power storefronts that convert

Marketing Sites

Launch campaigns fast

Multi-tenant Platforms

Scale apps with one codebase

Web Apps

Ship features, not infrastructure

Marketplace

Extend and automate workflows

Templates

Jumpstart app development

Partner Finder

Get help from solution partners

Platform Engineers

Automate away repetition

Design Engineers

Deploy for every idea