QR Code

QR Code is a component that generates a QR code from a string.

Installation

npx love-ui@latest add qr-code

Usage

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

<QRCode value="https://example.com" />

Features

Generates QR codes from any string data
Uses shadcn/ui CSS variables --foreground and --background
Supports custom foreground and background colors
Renders as SVG for crisp display at any size
Fully responsive with automatic sizing

Examples

Styling

The QR code is wrapped in a div so you can pass in a custom class name to style it.

"use client";

import { QRCode } from "../../../../../packages/qr-code";

const Example = () => (
  <QRCode
    className="size-48 rounded border bg-white p-4 shadow-xs"
    data="https://www.connorlove.com/"
  />
);

export default Example;

Robustness

You can change the robustness of the QR code by passing the robustness prop. Higher levels offer a better error resistance but reduce the symbol's capacity.

"use client";

import { QRCode } from "../../../../../packages/qr-code";
import type { ComponentProps } from "react";

const robustnessOptions: ComponentProps<typeof QRCode>["robustness"][] = [
  "L",
  "M",
  "Q",
  "H",
];

const Example = () => (
  <div className="grid grid-cols-4 gap-4">
    {robustnessOptions.map((robustness) => (
      <div className="flex flex-col items-center gap-2" key={robustness}>
        <QRCode data="https://www.loveconnor.com/" robustness={robustness} />
        <p className="font-medium text-muted-foreground text-sm">
          {robustness}
        </p>
      </div>
    ))}
  </div>
);

export default Example;

Server Component

You can also use the QRCode component as a React Server Component, however you'll need to pass in the foreground and background prop manually as hex values.

import { QRCode } from "../../../../../packages/qr-code/server";

const Example = () => (
  <QRCode
    background="#eee"
    data="https://www.loveconnor.com/"
    foreground="#111"
  />
);

export default Example;

Typography Spinner