Intro
A QR code that fits your design. Not just a black square.
A QR code doesn't have to look like an afterthought. QR Code for Elements generates fully styled, scannable codes directly on your page — no external services, no image uploads, no workarounds. Every detail is yours to control: dot shapes, corner styles, colors pulled straight from your theme palette, borders, gradients. The result is a QR code that feels like it belongs to your design, because it does.
Ten content types in one component: URL, phone, WhatsApp, email, V-Card, text, WiFi, SMS, calendar event, and GPS coordinates. Switch type, fill in the fields, and the code updates instantly.
AI ready
Fully compatible with the Elements AI Assistant. Every option now carries a clear, plain-language description. Tell the AI what the code should do and how it should look.
Example: "Add a QR code with my contact card: Anna Rossi, mobile +39 333 1234567, Via Roma 10, 20121 Milan. Dark blue dots fading to purple, rounded corners in orange, and a download button."
The AI builds a V-Card with name, phone and address, then applies the gradient, the corner color and the button in one step.
QR Type
✓ Choose what the code does when scanned. Ten content types in one component, versatile enough to cover virtually any use case, from sharing a contact card to connecting a device to a WiFi network, from dropping a pin on a map to scheduling a calendar event. Email includes built-in bot protection, the address is split into two parts, invisible to scrapers. Effectively a second email mode.
URL
Opens a web address directly in the browser.
Phone
Dials a phone number. Enter it in international format.
Opens a WhatsApp conversation. The prefix is added automatically.
Opens a pre-addressed message. Optional subject field included.
ⓘ Bot protection available with 'Obscure email'.
V-Card
Saves a full contact card: name, company, address, phone, mobile, email, url.
Text
Encodes a keyword or phrase. Scanning opens a Google search for that text.
WiFi
Connects to a network. Supports WPA/WPA2, WEP, and open networks.
SMS Messages
Opens a pre-filled text message ready to send.
Calendar
Adds an event with title, start and end time, location, and description. Times in UTC.
GPS Data
Opens a map at the specified coordinates. Find them by right-clicking any point in Google Maps.
Colors
✓ A QR code doesn't have to be anonymous. Full color control over every element, modules, corners, background, means the code becomes part of the design, not an interruption of it. Pick from your theme palette, add a gradient, give the corners their own color. The result is something people notice before they scan it.
Dots Gradient: a directional color transition across the modules, from Main Color to a Second Color. The direction is yours to choose. Simulated in Edit, verify in Preview.
Custom Corners: the three corner squares and their inner dots each have an independent color and opacity. A small detail with a big visual impact.
Module Style
✓ Shape is everything. Modules, corner squares, and corner dots each have their own style options, all fully scannable regardless of the choice. From sharp and technical to soft and rounded, the same code can feel completely different.
ⓘ Non-Sharp styles are not visible in Edit. This is expected: Edit uses a static SVG placeholder that shows color and proportions only. Switch to Preview to see the actual module shapes rendered by the engine.
Borders
✓ Add a border and rounded corners to the QR container.
Size
✓ Set the maximum display width of the QR code. Being SVG-based, the code naturally expands to fill its container, this value caps that expansion. The code scales responsively within that constraint, always staying sharp at any size.
ⓘ To reposition the QR code, place it inside a container and control alignment from there.
Layout
✓ A QR code makes sense where someone can scan it, on a printed page or a large screen, phone in hand. On mobile, code and scanner are on the same device: it loses its purpose.
Hidden lets you control visibility by breakpoint, based on Elements Theme Studio width settings.
ⓘ In the demo, the code is always visible across all breakpoints for preview purposes.
Download
✓ Add an optional button that lets visitors save the QR code as a PNG file.
Advanced
✓ add custom Tailwind or utility classes for advanced layout control.