QRCode

The QRCode component generates QR codes for encoding text, URLs, or other data. Supports customization of size, colors, quiet zones, error correction, and various rendering options.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁹⁾

Properties

⁽⁴⁷⁾

Playground

Basics

Render a single QR code for a link or payload and provide helper text for scanning context.

Loading demo…

import
 
{
 
QRCode
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<QRCode
      
value
=
"https:
//react-ui-library.com"
      
size
=
{
168
}
      
quietZone
=
{
2
}
      
label
=
"Scan to open the React UI Library docs."
    
/>
  
)
;
}

Sizes

Size accepts a token (xs–3xl) or an explicit pixel value, so QR codes line up with the rest of the size system while still allowing a bespoke footprint.

Loading demo…

import
 
{
 
Block
,
 
QRCode
,
 
Row
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 
SIZES
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Row
 
align
=
"flex-end"
 
gap
=
"lg"
 
wrap
=
"wrap"
>
        
{
SIZES
.
map
(
(
size
)
 
=>
 
(
          
<QRCode
            
key
=
{
size
}
            
value
=
"https:
//react-ui-library.com"
            
size
=
{
size
}
            
quietZone
=
{
2
}
            
label
=
{
size
}
          
/>
        
)
)
}
      
</Row
>
 
      
<QRCode
        
value
=
"https:
//react-ui-library.com"
        
size
=
{
144
}
        
quietZone
=
{
2
}
        
label
=
"144 (numeric)"
      
/>
    
</Block
>
  
)
;
}

Spacing

Compare quiet zone values and pair them with outer spacing props when embedding codes in dense layouts.

Loading demo…

import
 
{
 
Block
,
 
QRCode
,
 
Text
,
 useTheme 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 QUIET_ZONES 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 theme 
=
 
useTheme
(
)
;
 
  
return
 
(
    
<Block
 
align
=
"center"
>
      
{
QUIET_ZONES
.
map
(
(
{
 label
,
 quietZone 
}
)
 
=>
 
(
        
<QRCode
          
key
=
{
label
}
          
value
=
"https:
//react-ui-library.com"
          
size
=
{
150
}
          
quietZone
=
{
quietZone
}
          
label
=
{
label
}
        
/>
      
)
)
}
      
<Block
 
align
=
"center"
>
        
<Block
 
bg
=
{
theme
.
backgrounds
.
subtle
}
 
radius
=
"lg"
 
p
=
"sm"
>
          
<QRCode
            
value
=
"https:
//react-ui-library.com"
            
size
=
{
150
}
            
quietZone
=
{
0
}
            
m
=
"xs"
          
/>
        
</Block
>
        
<Text
 
variant
=
"small"
 
color
=
"muted"
>
          
Use
 spacing props and container styling to pad the 
QR
 code externally
.
        
</Text
>
      
</Block
>
    
</Block
>
  
)
;
}

Colors

Derive QR foreground and background colors from theme palettes to keep scans on brand.

Loading demo…

import
 
{
 
Block
,
 
QRCode
,
 
Row
,
 
Text
,
 useTheme 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 
SCHEMES
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 theme 
=
 
useTheme
(
)
;
 
  
return
 
(
    
<Block
>
      
<Text
 
variant
=
"small"
 
color
=
"muted"
>
        
Theme
-
aligned palettes
      
</Text
>
      
<Row
 
gap
=
"lg"
 
wrap
=
"wrap"
 
justify
=
"center"
>
        
{
SCHEMES
.
map
(
(
{
 key
,
 label 
}
)
 
=>
 
{
          
const
 palette 
=
 theme
.
colors
[
key
]
;
          
const
 foreground 
=
 palette
?
.
[
6
]
 
??
 theme
.
colors
.
primary
[
6
]
;
          
const
 background 
=
 palette
?
.
[
0
]
 
??
 theme
.
backgrounds
.
surface
;
 
          
return
 
(
            
<QRCode
              
key
=
{
key
}
              
value
=
"https:
//react-ui-library.com"
              
size
=
{
144
}
              
backgroundColor
=
{
background
}
              
color
=
{
foreground
}
              
quietZone
=
{
2
}
              
label
=
{
label
}
            
/>
          
)
;
        
}
)
}
      
</Row
>
    
</Block
>
  
)
;
}

Shapes

Switch between square, rounded, and diamond module shapes while keeping finder patterns scanner-safe.

Loading demo…

import
 
{
 
Block
,
 
QRCode
,
 
Row
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 
SHAPES
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Text
 
variant
=
"small"
 
color
=
"muted"
>
        
Module
 geometry
      
</Text
>
      
<Row
 
gap
=
"lg"
 
wrap
=
"wrap"
 
justify
=
"center"
>
        
{
SHAPES
.
map
(
(
{
 label
,
 value
,
 moduleShape
,
 cornerRadius 
}
)
 
=>
 
(
          
<QRCode
            
key
=
{
label
}
            
value
=
{
value
}
            
size
=
{
150
}
            
moduleShape
=
{
moduleShape
}
            
cornerRadius
=
{
cornerRadius
}
            
quietZone
=
{
1
}
            
label
=
{
label
}
          
/>
        
)
)
}
      
</Row
>
    
</Block
>
  
)
;
}

Gradients

Blend theme colors with linear or radial gradients to add polish without hurting scan reliability.

Loading demo…

import
 
{
 
Block
,
 
QRCode
,
 
Row
,
 
Text
,
 useTheme 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 createGradientExamples 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 theme 
=
 
useTheme
(
)
;
  
const
 gradients 
=
 
createGradientExamples
(
theme
)
;
 
  
return
 
(
    
<Block
>
      
<Text
 
variant
=
"small"
 
color
=
"muted"
>
        
Gradient
 fills
      
</Text
>
      
<Row
 
gap
=
"lg"
 
wrap
=
"wrap"
 
justify
=
"center"
>
        
{
gradients
.
map
(
(
{
 label
,
 value
,
 gradient
,
 moduleShape
,
 cornerRadius 
}
)
 
=>
 
(
          
<QRCode
            
key
=
{
label
}
            
value
=
{
value
}
            
size
=
{
160
}
            
gradient
=
{
gradient
}
            
moduleShape
=
{
moduleShape
}
            
cornerRadius
=
{
cornerRadius
}
            
quietZone
=
{
2
}
            
label
=
{
label
}
          
/>
        
)
)
}
      
</Row
>
    
</Block
>
  
)
;
}

Interactive

Let editors tweak the payload, size, error correction, and module shape while previewing the QR code live.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Button
,
 
Input
,
 
QRCode
,
 
Row
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 ERROR_LEVELS
,
 MODULE_SHAPES
,
 
PRESETS
,
 
SIZES
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 useState
<
string
>
(
PRESETS
[
0
]
.
value
)
;
  
const
 
[
size
,
 setSize
]
 
=
 useState
<
(
typeof 
SIZES
)
[
number
]
>
(
SIZES
[
1
]
)
;
  
const
 
[
errorLevel
,
 setErrorLevel
]
 
=
 useState
<
(
typeof ERROR_LEVELS
)
[
number
]
>
(
'M'
)
;
  
const
 
[
moduleShape
,
 setModuleShape
]
 
=
 useState
<
(
typeof MODULE_SHAPES
)
[
number
]
>
(
'square'
)
;
 
  
return
 
(
    
<Block
>
      
<Block
>
        
<Text
 
variant
=
"small"
 
color
=
"muted"
>
          
Source
 content
        
</Text
>
        
<Input
          
value
=
{
value
}
          
onChangeText
=
{
setValue
}
          
placeholder
=
"Enter text, URL, or contact info"
          multiline
          
minLines
=
{
1
}
          
maxLines
=
{
3
}
        
/>
        
<Row
 
gap
=
"xs"
 
wrap
=
"wrap"
>
          
{
PRESETS
.
map
(
(
{
 label
,
 value
:
 preset 
}
)
 
=>
 
(
            
<Button
              
key
=
{
label
}
              
size
=
"xs"
              
variant
=
{
value 
===
 preset 
?
 
'filled'
 
:
 
'outline'
}
              
onPress
=
{
(
)
 
=>
 
setValue
(
preset
)
}
            
>
              
{
label
}
            
</Button
>
          
)
)
}
        
</Row
>
        
<Text
 
variant
=
"small"
 
color
=
"muted"
>
          
{
value
.
length
}
 characters
        
</Text
>
      
</Block
>
      
<Row
 
gap
=
"lg"
 
wrap
=
"wrap"
 
align
=
"flex-start"
>
        
<Block
 
maxW
=
{
320
}
 
w
=
"full"
>
          
<Block
>
            
<Block
>
              
<Text
 
variant
=
"small"
 
color
=
"muted"
>
                
Size
              
</Text
>
              
<Row
 
gap
=
"xs"
 
wrap
=
"wrap"
>
                
{
SIZES
.
map
(
(
option
)
 
=>
 
(
                  
<Button
                    
key
=
{
option
}
                    
size
=
"xs"
                    
variant
=
{
size 
===
 option 
?
 
'filled'
 
:
 
'outline'
}
                    
onPress
=
{
(
)
 
=>
 
setSize
(
option
)
}
                  
>
                    
{
option
}
px
                  
</Button
>
                
)
)
}
              
</Row
>
            
</Block
>
            
<Block
>
              
<Text
 
variant
=
"small"
 
color
=
"muted"
>
                
Error
 correction
              
</Text
>
              
<Row
 
gap
=
"xs"
 
wrap
=
"wrap"
>
                
{
ERROR_LEVELS
.
map
(
(
level
)
 
=>
 
(
                  
<Button
                    
key
=
{
level
}
                    
size
=
"xs"
                    
variant
=
{
errorLevel 
===
 level 
?
 
'filled'
 
:
 
'outline'
}
                    
onPress
=
{
(
)
 
=>
 
setErrorLevel
(
level
)
}
                  
>
                    
{
level
}
                  
</Button
>
                
)
)
}
              
</Row
>
              
<Text
 
variant
=
"small"
 
color
=
"muted"
>
                
L
≈
7
%
 • 
M
≈
15
%
 • 
Q
≈
25
%
 • 
H
≈
30
%
 recovery
              
</Text
>
            
</Block
>
            
<Block
>
              
<Text
 
variant
=
"small"
 
color
=
"muted"
>
                
Module
 shape
              
</Text
>
              
<Row
 
gap
=
"xs"
 
wrap
=
"wrap"
>
                
{
MODULE_SHAPES
.
map
(
(
shape
)
 
=>
 
(
                  
<Button
                    
key
=
{
shape
}
                    
size
=
"xs"
                    
variant
=
{
moduleShape 
===
 shape 
?
 
'filled'
 
:
 
'outline'
}
                    
onPress
=
{
(
)
 
=>
 
setModuleShape
(
shape
)
}
                  
>
                    
{
shape
.
charAt
(
0
)
.
toUpperCase
(
)
 
+
 shape
.
slice
(
1
)
}
                  
</Button
>
                
)
)
}
              
</Row
>
            
</Block
>
          
</Block
>
        
</Block
>
        
<QRCode
          
value
=
{
value 
||
 
'React UI Library'
}
          
size
=
{
size
}
          
quietZone
=
{
2
}
          
errorCorrectionLevel
=
{
errorLevel
}
          
moduleShape
=
{
moduleShape
}
          
cornerRadius
=
{
moduleShape 
===
 
'rounded'
 
?
 
0.4
 
:
 
undefined
}
          
copyOnPress
=
{
{
 value 
}
}
          
label
=
{
`${size}px • Level ${errorLevel} • ${moduleShape} modules`
}
          
labelProps
=
{
{
 style
:
 
{
 textAlign
:
 
'center'
 
}
 
}
}
        
/>
      
</Row
>
    
</Block
>
  
)
;
}

Logos

Embed brand marks inside the QR code while preserving quiet zones and scanner-friendly contrast.

Loading demo…

import
 
{
 
QRCode
,
 
Row
,
 useTheme 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 LOGO_EXAMPLES 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 theme 
=
 
useTheme
(
)
;
 
  
return
 
(
    
<Row
 
gap
=
"lg"
 
wrap
=
"wrap"
 
justify
=
"center"
>
      
{
LOGO_EXAMPLES
.
map
(
(
{
 label
,
 value
,
 moduleShape
,
 cornerRadius
,
 logo 
}
)
 
=>
 
(
        
<QRCode
          
key
=
{
label
}
          
value
=
{
value
}
          
size
=
{
176
}
          
moduleShape
=
{
moduleShape
}
          
cornerRadius
=
{
cornerRadius
}
          
quietZone
=
{
2
}
          
logo
=
{
{
            
.
.
.
logo
,
            backgroundColor
:
 theme
.
backgrounds
.
surface
          
}
}
          
label
=
{
label
}
        
/>
      
)
)
}
    
</Row
>
  
)
;
}

QR Code Variants

Compare how error correction levels and quiet zone widths influence scannability.

Loading demo…

import
 
{
 
Block
,
 
QRCode
,
 
Row
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 ERROR_LEVELS
,
 QUIET_ZONES 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Block
>
        
<Text
 
variant
=
"small"
 
color
=
"muted"
>
          
Error
 correction levels
        
</Text
>
        
<Row
 
gap
=
"lg"
 
wrap
=
"wrap"
 
justify
=
"center"
>
          
{
ERROR_LEVELS
.
map
(
(
{
 label
,
 value 
}
)
 
=>
 
(
            
<QRCode
              
key
=
{
value
}
              
value
=
{
`https:
//react-ui-library.com/ecc/${value}`}
              
errorCorrectionLevel
=
{
value
}
              
size
=
{
140
}
              
label
=
{
label
}
            
/>
          
)
)
}
        
</Row
>
      
</Block
>
      
<Block
>
        
<Text
 
variant
=
"small"
 
color
=
"muted"
>
          
Quiet
 zone widths
        
</Text
>
        
<Row
 
gap
=
"lg"
 
wrap
=
"wrap"
 
justify
=
"center"
>
          
{
QUIET_ZONES
.
map
(
(
quietZone
)
 
=>
 
(
            
<QRCode
              
key
=
{
quietZone
}
              
value
=
{
`https:
//react-ui-library.com/quiet-zone/${quietZone}`}
              
quietZone
=
{
quietZone
}
              
size
=
{
140
}
              
label
=
{
`Quiet zone: ${quietZone}`
}
            
/>
          
)
)
}
        
</Row
>
      
</Block
>
    
</Block
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/QRCode

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap