QR Code

A customizable QR code component built with qr-code-styling. Supports different sizes, embedded logos, and decorative scanning effects.

1. Basic Usage

Generate a simple QR code by providing a value to encode.

import { QRCode } from "@/components/ui/qr-code";

<QRCode value="https://www.untitledui.com/" size="md" />
<QRCode value="https://www.untitledui.com/" size="lg" />

2. Gradient Scan Effect

Combine QRCode with GradientScan to simulate a scanning animation overlay.

<div className="relative flex w-full items-center justify-center max-w-60 aspect-square">
  <QRCode value="https://www.untitledui.com/" size="md" />
  <GradientScan />
</div>

3. Custom Options

Use the options prop to customize dot colors, corners, or embed an image (e.g., your logo).

<QRCode
  size="lg"
  value="https://www.untitledui.com/"
  options={{
    image: "/untitledui-logomark.png",
    imageOptions: { imageSize: 0.5, margin: 2 },
    dotsOptions: { color: "#53389e" },
    cornersSquareOptions: { color: "#53389e" },
    cornersDotOptions: { color: "#53389e" },
  }}
/>

API Reference

Prop	Type	Default	Description
value	string	—	The value or URL to encode in the QR code.
options?	QRCodeStylingOptions	—	Additional customization options for styling dots, corners, or images.
size?	"md" \| "lg"	"md"	The size of the rendered QR code.
className?	string	—	Optional additional class names for styling.