Free and open-source React QR code components built for modern applications and websites. This component is built using QR Code Styling library and styled with Tailwind CSS.
Installation
You can add this QR code component using our CLI or manually:
npx untitledui@latest add qr-code
QR code examples
Below are examples and variations of this QR code component:
Default
In order to use the default QR code, you can simply import the component and pass the value you want to encode in the QR code via the value prop.
Large
You can change the size of the QR code by passing the size prop. For example, to use a large QR code, you can pass size="lg" to the component.
With gradient scan
You can add a gradient scan effect to the QR code by passing using the GradientScan component together with the QRCode component.
With custom options
The QR code component is built using QR Code Styling library, which provides a lot of customization options. For example, to add an image to the QR code, you can pass your image URL to the options.image. To see the full list of options, please refer to the QR Code Styling documentation.
API reference
QRCode
Import QRCode from @/components/shared-assets/qr-code. Renders a <div> element.
FAQs
Please refer to our frequently asked questions page for more.
The component is built on the qr-code-styling library. Add the component with npx untitledui@latest add qr-code. If you copy the file manually, also install the library with npm install qr-code-styling.
The size prop accepts "md" (a 96px code) and "lg" (a 128px code). The default is "md". For any other size, pass width and height in options, which override the size preset.
Pass an options object. It goes straight to qr-code-styling, so you can set dotsOptions, cornersSquareOptions, cornersDotOptions, image, imageOptions and any other option the library supports, as shown in the custom options example.
The component creates a new QR code and appends it to its container whenever value, size or the options object changes. An inline options={{ ... }} object is new on every render, so define it outside your component or wrap it in useMemo to keep its reference stable.
No. It's a client component, and the QR code is generated in a useEffect, so the server-rendered HTML only contains the empty frame. The code appears once the component mounts in the browser.
Import GradientScan alongside QRCode and render it next to the QR code inside a relative container. GradientScan is absolutely positioned and covers the bottom half of that container, as shown in the gradient scan example.
Yes. The component renders an SVG by default (type: "svg"), and the options object is applied after the defaults. Set type: "canvas" in options to render it as a canvas.