Back
Back
Back
Dynamic QR Maker
Dynamic QR Maker
Page Contents
Page Contents
Page Contents
Easily add auto generated QR codes to anything Framer
Elevate your Framer projects with the QR Code Generator, a powerful and customizable code component designed by Chris Kellett of Framerverse. This free, user-friendly tool empowers you to seamlessly create dynamic QR codes for any purpose—whether it’s linking to a website, sharing contact details, or connecting to WiFi—all within your Framer workflow.
Key Features
Multiple QR Types: Generate QR codes for URLs, plain text, email addresses, phone numbers, SMS, WiFi credentials, or even detailed vCards for professional contact sharing.
Fully Customizable Design: Tailor your QR code with adjustable size (64px to 1024px), foreground and background colors, container styling, corner radius, and margins to perfectly match your project’s aesthetic.
Error Correction Options: Choose from four error correction levels (Low to High) to ensure your QR code remains scannable, even with minor damage.
Intuitive Controls: Leverage Framer’s property controls to tweak every aspect of your QR code without touching a line of code—ideal for designers and developers alike.
Responsive & Flexible: Built with React and Motion from Framer, this component adapts effortlessly to your layout, ensuring a polished look on any device.
Why You’ll Love It
Whether you’re crafting a portfolio, designing a business card, or building an interactive prototype, the QR Code Generator saves you time and adds a modern, functional touch to your work. From sharing a website link to enabling instant WiFi access, this component supports a wide range of use cases—all for free.
Get Started Today
Download the QR Code Generator (v1.1.0) now and unlock endless possibilities for your Framer projects. Created by Chris Kellett, this component is a must-have addition to your design toolkit. No coding skills required—just drag, drop, and customize!
Perfect for: Designers, developers, and Framer enthusiasts looking to add interactive, scannable elements to their creations. Try it out and see how easy it is to bring your ideas to life!
If you are not sure how to add code to Framer watch this quick video.
Framer Code Component
Dynamic QR Maker
1.1.0
1.1.0
1.1.0
1.1.0
// A custom Framer code component by Chris Kellett - Framerverse
// v1.1.0
import React from "react"
import { motion, addPropertyControls, ControlType } from "framer"
import { QRCodeSVG } from "qrcode.react"
// Define props type for TypeScript
export default function QRCodeGenerator(props) {
// Destructure props with defaults
const {
sourceType = "url",
source = "https://framer.com",
customText = "",
customEmail = "hello@example.com",
customPhone = "+1234567890",
size = 160,
fgColor = "#000000",
bgColor = "#ffffff",
qrColor = "#000000",
qrBackgroundColor = "#ffffff",
margin = 4,
cornerRadius = 0,
level = "M",
includeMargin = true,
style = {},
} = props
// Determine QR code value based on source type
const getQRValue = () => {
switch (sourceType) {
case "url":
return source
case "text":
return customText
case "email":
return `mailto:${customEmail}`
case "phone":
return `tel:${customPhone}`
case "sms":
return `sms:${customPhone}`
case "wifi":
const { wifiName, wifiPassword, wifiType } = props
return `WIFI:S:${wifiName};T:${wifiType};P:${wifiPassword};;`
case "vcard":
const { vName, vEmail, vPhone, vCompany, vTitle, vWebsite } =
props
return `BEGIN:VCARD
VERSION:3.0
N:${vName}
TEL:${vPhone}
EMAIL:${vEmail}
ORG:${vCompany}
TITLE:${vTitle}
URL:${vWebsite}
END:VCARD`
default:
return source
}
}
// Calculate container dimensions
const containerSize = size + margin * 2
return (
<motion.div
style={{
width: "100%",
height: "100%",
backgroundColor: bgColor,
borderRadius: cornerRadius,
display: "flex",
justifyContent: "center",
alignItems: "center",
overflow: "hidden",
...style,
}}
>
<div
style={{
maxWidth: "100%",
maxHeight: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: margin,
}}
>
<QRCodeSVG
value={getQRValue()}
size={size}
bgColor={qrBackgroundColor}
fgColor={qrColor}
level={level}
includeMargin={includeMargin}
/>
</div>
</motion.div>
)
}
// Framer Property Controls
addPropertyControls(QRCodeGenerator, {
// Source Type Selection
sourceType: {
type: ControlType.Enum,
title: "QR Type",
options: ["url", "text", "email", "phone", "sms", "wifi", "vcard"],
optionTitles: ["URL", "Text", "Email", "Phone", "SMS", "WiFi", "vCard"],
defaultValue: "url",
},
// URL source
source: {
type: ControlType.String,
title: "URL",
defaultValue: "https://framer.com",
placeholder: "https://example.com",
hidden: (props) => props.sourceType !== "url",
},
// Text source
customText: {
type: ControlType.String,
title: "Text",
defaultValue: "Your custom text here",
placeholder: "Enter your text",
hidden: (props) => props.sourceType !== "text",
},
// Email source
customEmail: {
type: ControlType.String,
title: "Email",
defaultValue: "hello@example.com",
placeholder: "email@example.com",
hidden: (props) => props.sourceType !== "email",
},
// Phone source
customPhone: {
type: ControlType.String,
title: "Phone",
defaultValue: "+1234567890",
placeholder: "+1234567890",
hidden: (props) =>
props.sourceType !== "phone" && props.sourceType !== "sms",
},
// WiFi settings
wifiName: {
type: ControlType.String,
title: "WiFi Name",
defaultValue: "My WiFi",
placeholder: "Network SSID",
hidden: (props) => props.sourceType !== "wifi",
},
wifiPassword: {
type: ControlType.String,
title: "Password",
defaultValue: "password123",
placeholder: "WiFi Password",
hidden: (props) => props.sourceType !== "wifi",
},
wifiType: {
type: ControlType.Enum,
title: "Security",
options: ["WPA", "WEP", "nopass"],
optionTitles: ["WPA/WPA2", "WEP", "None"],
defaultValue: "WPA",
hidden: (props) => props.sourceType !== "wifi",
},
// vCard settings
vName: {
type: ControlType.String,
title: "Name",
defaultValue: "John Doe",
hidden: (props) => props.sourceType !== "vcard",
},
vPhone: {
type: ControlType.String,
title: "Phone",
defaultValue: "+1234567890",
hidden: (props) => props.sourceType !== "vcard",
},
vEmail: {
type: ControlType.String,
title: "Email",
defaultValue: "john@example.com",
hidden: (props) => props.sourceType !== "vcard",
},
vCompany: {
type: ControlType.String,
title: "Company",
defaultValue: "Acme Inc",
hidden: (props) => props.sourceType !== "vcard",
},
vTitle: {
type: ControlType.String,
title: "Job Title",
defaultValue: "Designer",
hidden: (props) => props.sourceType !== "vcard",
},
vWebsite: {
type: ControlType.String,
title: "Website",
defaultValue: "https://example.com",
hidden: (props) => props.sourceType !== "vcard",
},
// QR Code appearance
size: {
type: ControlType.Number,
title: "QR Size",
defaultValue: 160,
min: 64,
max: 1024,
step: 8,
displayStepper: true,
},
level: {
type: ControlType.Enum,
title: "Error Correction",
options: ["L", "M", "Q", "H"],
optionTitles: [
"Low (7%)",
"Medium (15%)",
"Quartile (25%)",
"High (30%)",
],
defaultValue: "M",
description: "Higher levels allow more damage to the QR code",
},
qrColor: {
type: ControlType.Color,
title: "QR Color",
defaultValue: "#000000",
},
qrBackgroundColor: {
type: ControlType.Color,
title: "QR Background",
defaultValue: "#ffffff",
},
// Container styling
bgColor: {
type: ControlType.Color,
title: "Container Color",
defaultValue: "#ffffff",
},
margin: {
type: ControlType.Number,
title: "Margin",
defaultValue: 4,
min: 0,
max: 50,
step: 1,
displayStepper: true,
},
cornerRadius: {
type: ControlType.Number,
title: "Corner Radius",
defaultValue: 0,
min: 0,
max: 100,
step: 1,
},
includeMargin: {
type: ControlType.Boolean,
title: "QR Internal Margin",
defaultValue: true,
},
})
CLICK TO COPY
// A custom Framer code component by Chris Kellett - Framerverse
// v1.1.0
import React from "react"
import { motion, addPropertyControls, ControlType } from "framer"
import { QRCodeSVG } from "qrcode.react"
// Define props type for TypeScript
export default function QRCodeGenerator(props) {
// Destructure props with defaults
const {
sourceType = "url",
source = "https://framer.com",
customText = "",
customEmail = "hello@example.com",
customPhone = "+1234567890",
size = 160,
fgColor = "#000000",
bgColor = "#ffffff",
qrColor = "#000000",
qrBackgroundColor = "#ffffff",
margin = 4,
cornerRadius = 0,
level = "M",
includeMargin = true,
style = {},
} = props
// Determine QR code value based on source type
const getQRValue = () => {
switch (sourceType) {
case "url":
return source
case "text":
return customText
case "email":
return `mailto:${customEmail}`
case "phone":
return `tel:${customPhone}`
case "sms":
return `sms:${customPhone}`
case "wifi":
const { wifiName, wifiPassword, wifiType } = props
return `WIFI:S:${wifiName};T:${wifiType};P:${wifiPassword};;`
case "vcard":
const { vName, vEmail, vPhone, vCompany, vTitle, vWebsite } =
props
return `BEGIN:VCARD
VERSION:3.0
N:${vName}
TEL:${vPhone}
EMAIL:${vEmail}
ORG:${vCompany}
TITLE:${vTitle}
URL:${vWebsite}
END:VCARD`
default:
return source
}
}
// Calculate container dimensions
const containerSize = size + margin * 2
return (
<motion.div
style={{
width: "100%",
height: "100%",
backgroundColor: bgColor,
borderRadius: cornerRadius,
display: "flex",
justifyContent: "center",
alignItems: "center",
overflow: "hidden",
...style,
}}
>
<div
style={{
maxWidth: "100%",
maxHeight: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: margin,
}}
>
<QRCodeSVG
value={getQRValue()}
size={size}
bgColor={qrBackgroundColor}
fgColor={qrColor}
level={level}
includeMargin={includeMargin}
/>
</div>
</motion.div>
)
}
// Framer Property Controls
addPropertyControls(QRCodeGenerator, {
// Source Type Selection
sourceType: {
type: ControlType.Enum,
title: "QR Type",
options: ["url", "text", "email", "phone", "sms", "wifi", "vcard"],
optionTitles: ["URL", "Text", "Email", "Phone", "SMS", "WiFi", "vCard"],
defaultValue: "url",
},
// URL source
source: {
type: ControlType.String,
title: "URL",
defaultValue: "https://framer.com",
placeholder: "https://example.com",
hidden: (props) => props.sourceType !== "url",
},
// Text source
customText: {
type: ControlType.String,
title: "Text",
defaultValue: "Your custom text here",
placeholder: "Enter your text",
hidden: (props) => props.sourceType !== "text",
},
// Email source
customEmail: {
type: ControlType.String,
title: "Email",
defaultValue: "hello@example.com",
placeholder: "email@example.com",
hidden: (props) => props.sourceType !== "email",
},
// Phone source
customPhone: {
type: ControlType.String,
title: "Phone",
defaultValue: "+1234567890",
placeholder: "+1234567890",
hidden: (props) =>
props.sourceType !== "phone" && props.sourceType !== "sms",
},
// WiFi settings
wifiName: {
type: ControlType.String,
title: "WiFi Name",
defaultValue: "My WiFi",
placeholder: "Network SSID",
hidden: (props) => props.sourceType !== "wifi",
},
wifiPassword: {
type: ControlType.String,
title: "Password",
defaultValue: "password123",
placeholder: "WiFi Password",
hidden: (props) => props.sourceType !== "wifi",
},
wifiType: {
type: ControlType.Enum,
title: "Security",
options: ["WPA", "WEP", "nopass"],
optionTitles: ["WPA/WPA2", "WEP", "None"],
defaultValue: "WPA",
hidden: (props) => props.sourceType !== "wifi",
},
// vCard settings
vName: {
type: ControlType.String,
title: "Name",
defaultValue: "John Doe",
hidden: (props) => props.sourceType !== "vcard",
},
vPhone: {
type: ControlType.String,
title: "Phone",
defaultValue: "+1234567890",
hidden: (props) => props.sourceType !== "vcard",
},
vEmail: {
type: ControlType.String,
title: "Email",
defaultValue: "john@example.com",
hidden: (props) => props.sourceType !== "vcard",
},
vCompany: {
type: ControlType.String,
title: "Company",
defaultValue: "Acme Inc",
hidden: (props) => props.sourceType !== "vcard",
},
vTitle: {
type: ControlType.String,
title: "Job Title",
defaultValue: "Designer",
hidden: (props) => props.sourceType !== "vcard",
},
vWebsite: {
type: ControlType.String,
title: "Website",
defaultValue: "https://example.com",
hidden: (props) => props.sourceType !== "vcard",
},
// QR Code appearance
size: {
type: ControlType.Number,
title: "QR Size",
defaultValue: 160,
min: 64,
max: 1024,
step: 8,
displayStepper: true,
},
level: {
type: ControlType.Enum,
title: "Error Correction",
options: ["L", "M", "Q", "H"],
optionTitles: [
"Low (7%)",
"Medium (15%)",
"Quartile (25%)",
"High (30%)",
],
defaultValue: "M",
description: "Higher levels allow more damage to the QR code",
},
qrColor: {
type: ControlType.Color,
title: "QR Color",
defaultValue: "#000000",
},
qrBackgroundColor: {
type: ControlType.Color,
title: "QR Background",
defaultValue: "#ffffff",
},
// Container styling
bgColor: {
type: ControlType.Color,
title: "Container Color",
defaultValue: "#ffffff",
},
margin: {
type: ControlType.Number,
title: "Margin",
defaultValue: 4,
min: 0,
max: 50,
step: 1,
displayStepper: true,
},
cornerRadius: {
type: ControlType.Number,
title: "Corner Radius",
defaultValue: 0,
min: 0,
max: 100,
step: 1,
},
includeMargin: {
type: ControlType.Boolean,
title: "QR Internal Margin",
defaultValue: true,
},
})
CLICK TO COPY
// A custom Framer code component by Chris Kellett - Framerverse
// v1.1.0
import React from "react"
import { motion, addPropertyControls, ControlType } from "framer"
import { QRCodeSVG } from "qrcode.react"
// Define props type for TypeScript
export default function QRCodeGenerator(props) {
// Destructure props with defaults
const {
sourceType = "url",
source = "https://framer.com",
customText = "",
customEmail = "hello@example.com",
customPhone = "+1234567890",
size = 160,
fgColor = "#000000",
bgColor = "#ffffff",
qrColor = "#000000",
qrBackgroundColor = "#ffffff",
margin = 4,
cornerRadius = 0,
level = "M",
includeMargin = true,
style = {},
} = props
// Determine QR code value based on source type
const getQRValue = () => {
switch (sourceType) {
case "url":
return source
case "text":
return customText
case "email":
return `mailto:${customEmail}`
case "phone":
return `tel:${customPhone}`
case "sms":
return `sms:${customPhone}`
case "wifi":
const { wifiName, wifiPassword, wifiType } = props
return `WIFI:S:${wifiName};T:${wifiType};P:${wifiPassword};;`
case "vcard":
const { vName, vEmail, vPhone, vCompany, vTitle, vWebsite } =
props
return `BEGIN:VCARD
VERSION:3.0
N:${vName}
TEL:${vPhone}
EMAIL:${vEmail}
ORG:${vCompany}
TITLE:${vTitle}
URL:${vWebsite}
END:VCARD`
default:
return source
}
}
// Calculate container dimensions
const containerSize = size + margin * 2
return (
<motion.div
style={{
width: "100%",
height: "100%",
backgroundColor: bgColor,
borderRadius: cornerRadius,
display: "flex",
justifyContent: "center",
alignItems: "center",
overflow: "hidden",
...style,
}}
>
<div
style={{
maxWidth: "100%",
maxHeight: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: margin,
}}
>
<QRCodeSVG
value={getQRValue()}
size={size}
bgColor={qrBackgroundColor}
fgColor={qrColor}
level={level}
includeMargin={includeMargin}
/>
</div>
</motion.div>
)
}
// Framer Property Controls
addPropertyControls(QRCodeGenerator, {
// Source Type Selection
sourceType: {
type: ControlType.Enum,
title: "QR Type",
options: ["url", "text", "email", "phone", "sms", "wifi", "vcard"],
optionTitles: ["URL", "Text", "Email", "Phone", "SMS", "WiFi", "vCard"],
defaultValue: "url",
},
// URL source
source: {
type: ControlType.String,
title: "URL",
defaultValue: "https://framer.com",
placeholder: "https://example.com",
hidden: (props) => props.sourceType !== "url",
},
// Text source
customText: {
type: ControlType.String,
title: "Text",
defaultValue: "Your custom text here",
placeholder: "Enter your text",
hidden: (props) => props.sourceType !== "text",
},
// Email source
customEmail: {
type: ControlType.String,
title: "Email",
defaultValue: "hello@example.com",
placeholder: "email@example.com",
hidden: (props) => props.sourceType !== "email",
},
// Phone source
customPhone: {
type: ControlType.String,
title: "Phone",
defaultValue: "+1234567890",
placeholder: "+1234567890",
hidden: (props) =>
props.sourceType !== "phone" && props.sourceType !== "sms",
},
// WiFi settings
wifiName: {
type: ControlType.String,
title: "WiFi Name",
defaultValue: "My WiFi",
placeholder: "Network SSID",
hidden: (props) => props.sourceType !== "wifi",
},
wifiPassword: {
type: ControlType.String,
title: "Password",
defaultValue: "password123",
placeholder: "WiFi Password",
hidden: (props) => props.sourceType !== "wifi",
},
wifiType: {
type: ControlType.Enum,
title: "Security",
options: ["WPA", "WEP", "nopass"],
optionTitles: ["WPA/WPA2", "WEP", "None"],
defaultValue: "WPA",
hidden: (props) => props.sourceType !== "wifi",
},
// vCard settings
vName: {
type: ControlType.String,
title: "Name",
defaultValue: "John Doe",
hidden: (props) => props.sourceType !== "vcard",
},
vPhone: {
type: ControlType.String,
title: "Phone",
defaultValue: "+1234567890",
hidden: (props) => props.sourceType !== "vcard",
},
vEmail: {
type: ControlType.String,
title: "Email",
defaultValue: "john@example.com",
hidden: (props) => props.sourceType !== "vcard",
},
vCompany: {
type: ControlType.String,
title: "Company",
defaultValue: "Acme Inc",
hidden: (props) => props.sourceType !== "vcard",
},
vTitle: {
type: ControlType.String,
title: "Job Title",
defaultValue: "Designer",
hidden: (props) => props.sourceType !== "vcard",
},
vWebsite: {
type: ControlType.String,
title: "Website",
defaultValue: "https://example.com",
hidden: (props) => props.sourceType !== "vcard",
},
// QR Code appearance
size: {
type: ControlType.Number,
title: "QR Size",
defaultValue: 160,
min: 64,
max: 1024,
step: 8,
displayStepper: true,
},
level: {
type: ControlType.Enum,
title: "Error Correction",
options: ["L", "M", "Q", "H"],
optionTitles: [
"Low (7%)",
"Medium (15%)",
"Quartile (25%)",
"High (30%)",
],
defaultValue: "M",
description: "Higher levels allow more damage to the QR code",
},
qrColor: {
type: ControlType.Color,
title: "QR Color",
defaultValue: "#000000",
},
qrBackgroundColor: {
type: ControlType.Color,
title: "QR Background",
defaultValue: "#ffffff",
},
// Container styling
bgColor: {
type: ControlType.Color,
title: "Container Color",
defaultValue: "#ffffff",
},
margin: {
type: ControlType.Number,
title: "Margin",
defaultValue: 4,
min: 0,
max: 50,
step: 1,
displayStepper: true,
},
cornerRadius: {
type: ControlType.Number,
title: "Corner Radius",
defaultValue: 0,
min: 0,
max: 100,
step: 1,
},
includeMargin: {
type: ControlType.Boolean,
title: "QR Internal Margin",
defaultValue: true,
},
})
CLICK TO COPY
What is it?
Easily add auto generated QR codes to anything Framer
What is it?
Easily add auto generated QR codes to anything Framer
What is it?
Easily add auto generated QR codes to anything Framer
How to use.
Click in the code are below to copy the code to your clipboard. Then click the 'plus' button int the assets panel for 'Code'. Choose if its an overide or Component. Paste the code in and save.
How to use.
Click in the code are below to copy the code to your clipboard. Then click the 'plus' button int the assets panel for 'Code'. Choose if its an overide or Component. Paste the code in and save.
How to use.
Click in the code are below to copy the code to your clipboard. Then click the 'plus' button int the assets panel for 'Code'. Choose if its an overide or Component. Paste the code in and save.
Usage Licence
I'm happy for you to use this code in your projects, even templates. If you use it please keep my accreditation in the code. Please don't sell it as your own. (Hover for full licence).
Usage Licence
I'm happy for you to use this code in your projects, even templates. If you use it please keep my accreditation in the code. Please don't sell it as your own. (Hover for full licence).
Usage Licence
I'm happy for you to use this code in your projects, even templates. If you use it please keep my accreditation in the code. Please don't sell it as your own. (Hover for full licence).
Change Log
//Version 1.1.0Figma to Framer
Support
If you need support first watch the help video above. If that does not help reach out to me on one of my social channels or use the contact form. As I am a team of one it may take a short while to get back to you. Please be patient, thanks.
Hope this helps. Good luck with your project.
Scan to open on mobile.
More Framer resources.
Orb Background
A very cool background effect great for startups.
Code Component
Orb Background
A very cool background effect great for startups.
Code Component
Orb Background
A very cool background effect great for startups.
Code Component
Popup Advert Kit for Framer
Everything you need to start adding and running professional popup ads on Framer sites.
Kit
Popup Advert Kit for Framer
Everything you need to start adding and running professional popup ads on Framer sites.
Kit
Popup Advert Kit for Framer
Everything you need to start adding and running professional popup ads on Framer sites.
Kit
Real Loan Calculator
Add a fully functional, responsive, configurable loan calculator to your project.
Section
Real Loan Calculator
Add a fully functional, responsive, configurable loan calculator to your project.
Section
Real Loan Calculator
Add a fully functional, responsive, configurable loan calculator to your project.
Section
Mobile Rotation Alert
If your site works better in one orientation than another why not let your users know with this little component.
Code Component
Mobile Rotation Alert
If your site works better in one orientation than another why not let your users know with this little component.
Code Component
Mobile Rotation Alert
If your site works better in one orientation than another why not let your users know with this little component.
Code Component
Starfield Generator
A niche component for creating a swirling Starfield, simple but great in the right scenario (like this site).
Code Component
Starfield Generator
A niche component for creating a swirling Starfield, simple but great in the right scenario (like this site).
Code Component
Starfield Generator
A niche component for creating a swirling Starfield, simple but great in the right scenario (like this site).
Code Component
Swipe Variant Changer
Use this component and overide combo to create a swipe toggle that switches component variants.
Code Override
Swipe Variant Changer
Use this component and overide combo to create a swipe toggle that switches component variants.
Code Override
Swipe Variant Changer
Use this component and overide combo to create a swipe toggle that switches component variants.
Code Override