Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsShowcaseBlogGuides
Sponsor

QR Code

A component that generates a QR code based on the provided data.

SourceStorybookRecipeArk
AI TipWant to skip the docs? Use the MCP Server

Usage

import { QrCode } from "@chakra-ui/react"
<QrCode.Root value="...">
  <QrCode.Frame>
    <QrCode.Pattern />
  </QrCode.Frame>
</QrCode.Root>
info
If you prefer a closed component composition, check out the snippet below.

Examples

Sizes

Use the size prop to set the size of the QR code.

Logo Overlay

Pass the children prop to the QrCode.Overlay component to add a logo or overlay to the QR code.

Fill

Use the fill prop to set the fill color of the QR code.

Download

Use the QrCode.DownloadTrigger to download the QR code.

The fileName and the mimeType props are required.

Error Correction

In cases where the link is too long or the logo overlay covers a significant area, the error correction level can be increased.

Use the encoding.ecc or encoding.boostEcc property to set the error correction level:

  • L: Allows recovery of up to 7% data loss (default)
  • M: Allows recovery of up to 15% data loss
  • Q: Allows recovery of up to 25% data loss
  • H: Allows recovery of up to 30% data loss

Store

The RootProvider component provides a context for the QR code.

It accepts the value of the useQrCode hook. You can leverage it to access the component state and methods from outside the QR code.

Input

Here's an example of how to use the QrCode component with an Input component.

Spinner

Here's an example of how to use the QrCode component with a Spinner component.

Closed Component

Here's how to setup the QR code for a closed component composition.

import { QrCode as ChakraQrCode } from "@chakra-ui/react"
import * as React from "react"

export interface QrCodeProps
  extends Omit<ChakraQrCode.RootProps, "fill" | "overlay"> {
  fill?: string
  overlay?: React.ReactNode
}

export const QrCode = React.forwardRef<HTMLDivElement, QrCodeProps>(
  function QrCode(props, ref) {
    const { children, fill, overlay, ...rest } = props
    return (
      <ChakraQrCode.Root ref={ref} {...rest}>
        <ChakraQrCode.Frame style={{ fill }}>
          <ChakraQrCode.Pattern />
        </ChakraQrCode.Frame>
        {overlay}
        {children && <ChakraQrCode.Overlay>{children}</ChakraQrCode.Overlay>}
      </ChakraQrCode.Root>
    )
  },
)

If you want to automatically add the closed component to your project, run the command:

npx @chakra-ui/cli snippet add qr-code

Props

Root

PropDefaultType
colorPalette gray
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'

The color palette of the component

size md
'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'

The size of the component

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
unstyled
boolean

Whether to remove the component's style.

defaultValue
string

The initial value to encode when rendered. Use when you don't need to control the value of the qr code.

encoding
QrCodeGenerateOptions

The qr code encoding options.

id
string

The unique identifier of the machine.

ids
Partial<{ root: string; frame: string }>

The element ids.

onValueChange
(details: ValueChangeDetails) => void

Callback fired when the value changes.

pixelSize
number

The pixel size of the qr code.

value
string

The controlled value to encode.

DownloadTrigger

PropDefaultType
fileName *
string

The name of the file.

mimeType *
DataUrlType

The mime type of the image.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
quality
number

The quality of the image.

Explorer

Explore the QR Code component parts interactively. Click on parts in the sidebar to highlight them in the preview.

Component Anatomy

Hover to highlight, click to select parts

root

frame

pattern

overlay

downloadTrigger

qr-code.recipe.ts

Previous

Icon

Next

Stat