QR code components

Installation

You can add this QR code component using our CLI or manually:

npx untitledui 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.