Mantine QR Code Component

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

Overview

This component is created on top of the Mantine library.

The Mantine QR Code component is a highly customizable QR Code generator for React applications built with Mantine.

Features

• 🎨 Theme Integration: Full Mantine theme support with all theme colors for foreground and background
• 📐 Flexible Sizing: Supports all Mantine sizes (xs–xl) plus custom values
• 🔵 Dot Styles: Three data module styles — square, rounded, dots
• 🔲 Corner Styles: Three finder pattern styles — square, rounded, dots
• 🖼️ Image Overlay: Add a logo or image at the center with automatic module excavation
• 🛡️ Error Correction: Four levels — L (7%), M (15%), Q (25%), H (30%)
• 📥 Download Hook: useQRCodeDownload hook to export as SVG, PNG, JPEG, or WebP
• 🎨 Styles API: Full Mantine Styles API with 8 style selectors (root, svg, background, modules, finderPattern, finderOuter, finderInner, image)
• 📦 TypeScript: Full type safety out of the box
• ⚡ SSR Compatible: Works with Next.js server-side rendering

[!note]

→ Demo and Documentation → Youtube Video → More Mantine Components

Installation

npm install @gfazioli/mantine-qr-code

or

yarn add @gfazioli/mantine-qr-code

After installation import package styles at the root of your application:

import '@gfazioli/mantine-qr-code/styles.css';

Usage

import { QRCode } from '@gfazioli/mantine-qr-code';

function Demo() {
  return <QRCode value="https://mantine.dev" />;
}

Custom styles

<QRCode
  value="https://mantine.dev"
  size="xl"
  color="blue"
  dotStyle="rounded"
  cornerStyle="rounded"
/>

Image overlay

<QRCode
  value="https://mantine.dev"
  size="xl"
  image="https://example.com/logo.png"
  errorCorrectionLevel="H"
  imageRadius="md"
/>

Download as SVG/PNG

import { QRCode, useQRCodeDownload } from '@gfazioli/mantine-qr-code';

function Demo() {
  const { ref, download } = useQRCodeDownload({ fileName: 'my-qr-code' });

  return (
    <>
      <QRCode ref={ref} value="https://mantine.dev" />
      <button onClick={() => download({ format: 'png' })}>Download PNG</button>
      <button onClick={() => download({ format: 'svg' })}>Download SVG</button>
    </>
  );
}

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.