https://gfazioli.github.io/mantine-qr-code/
A Mantine 9 QR Code component for React with custom dot/finder shapes, image overlay, SVG/PNG download hook, and full Styles API.
https://gfazioli.github.io/mantine-qr-code/
download extension mantine mantine-extension mantine-ui mantine-v9 nextjs qr-code qr-code-generator qrcode react react-component svg typescript
Last synced: about 2 months ago
JSON representation
A Mantine 9 QR Code component for React with custom dot/finder shapes, image overlay, SVG/PNG download hook, and full Styles API.
- Host: GitHub
- URL: https://gfazioli.github.io/mantine-qr-code/
- Owner: gfazioli
- License: mit
- Created: 2026-03-13T18:00:12.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2026-04-03T15:15:40.000Z (about 2 months ago)
- Last Synced: 2026-04-04T14:10:33.806Z (about 2 months ago)
- Topics: download, extension, mantine, mantine-extension, mantine-ui, mantine-v9, nextjs, qr-code, qr-code-generator, qrcode, react, react-component, svg, typescript
- Language: TypeScript
- Homepage: https://gfazioli.github.io/mantine-qr-code/
- Size: 9.03 MB
- Stars: 7
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-mantine - Mantine QRCode - A highly customizable QR Code component for React built with Mantine. Custom dot/corner styles, image overlay, SVG/PNG download hook, and full Styles API. (Libraries)
README
# Mantine QR Code Component
[](https://www.npmjs.com/package/@gfazioli/mantine-qr-code)
[](https://www.npmjs.com/package/@gfazioli/mantine-qr-code)
[](https://www.npmjs.com/package/@gfazioli/mantine-qr-code)
---
[
❤️ If this component has been useful to you or your team, please consider becoming a sponsor
](https://github.com/sponsors/gfazioli?o=esc)
## Overview
This component is created on top of the [Mantine](https://mantine.dev/) library.
It requires **Mantine 9.x** and **React 19**.
The [Mantine QR Code](https://gfazioli.github.io/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](https://gfazioli.github.io/mantine-qr-code/) → [Youtube Video](https://www.youtube.com/playlist?list=PL85tTROKkZrWyqCcmNCdWajpx05-cTal4) → [More Mantine Components](https://mantine-extensions.vercel.app/)
## Installation
```sh
npm install @gfazioli/mantine-qr-code
```
or
```sh
yarn add @gfazioli/mantine-qr-code
```
After installation import package styles at the root of your application:
```tsx
import '@gfazioli/mantine-qr-code/styles.css';
```
## Usage
```tsx
import { QRCode } from '@gfazioli/mantine-qr-code';
function Demo() {
return ;
}
```
### Custom styles
```tsx
```
### Image overlay
```tsx
```
### Download as SVG/PNG
```tsx
import { QRCode, useQRCodeDownload } from '@gfazioli/mantine-qr-code';
function Demo() {
const { ref, download } = useQRCodeDownload({ fileName: 'my-qr-code' });
return (
<>
download({ format: 'png' })}>Download PNG
download({ format: 'svg' })}>Download SVG
>
);
}
```
## Sponsor
[
❤️ If this component has been useful to you or your team, please consider becoming a sponsor
](https://github.com/sponsors/gfazioli?o=esc)
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](https://github.com/sponsors/gfazioli?o=esc) today and help me keep this project reliable, up‑to‑date, and growing for everyone.
---
[](https://www.star-history.com/#gfazioli/mantine-qr-code&Timeline)