React QR Code - Flowbite

The QR code component encodes a URL, a payment string, a Wi-Fi handshake or any other text into a symbol that a phone camera can read. Every symbol is plain SVG, so it stays sharp at any size and renders on the server without a canvas.

Pick one of the examples below and use the React props to set the dot style, the corner style, the colors, the logo and the error correction level.

To start using the QR code component make sure you import it first from Flowbite React:

import { QRCode } from "flowbite-react";

Default QR code#

Use this example to encode a value with the value prop and set the rendered width with size. The symbol follows the current text color, so it stays readable in both light and dark mode without any extra work.

import { QRCode } from "flowbite-react";

export function Component() {
  return <QRCode value="https://flowbite-react.com" size={180} />;
}

Dot styles#

Use the dotStyle prop to change the shape of the data modules. Choose from square, circle and rounded, where rounded connects neighbouring modules into one flowing shape.

import { QRCode } from "flowbite-react";

export function Component() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6">
      <QRCode value="https://flowbite-react.com" size={140} dotStyle="square" />
      <QRCode value="https://flowbite-react.com" size={140} dotStyle="circle" />
      <QRCode value="https://flowbite-react.com" size={140} dotStyle="rounded" />
    </div>
  );
}

Corner styles#

The three finder patterns can be styled apart from the data modules. Use cornerStyle for the outer ring, with square, rounded, extra-rounded or circle, and cornerDotStyle for the dot inside it, with square, rounded or circle.

import { QRCode } from "flowbite-react";

export function Component() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6">
      <QRCode value="https://flowbite-react.com" size={140} cornerStyle="square" />
      <QRCode value="https://flowbite-react.com" size={140} cornerStyle="rounded" />
      <QRCode value="https://flowbite-react.com" size={140} cornerStyle="extra-rounded" />
      <QRCode value="https://flowbite-react.com" size={140} cornerStyle="circle" cornerDotStyle="circle" />
    </div>
  );
}

Colors#

Set dotColor, cornerColor, cornerDotColor and backgroundColor to any CSS color. Leave them unset and the symbol draws itself in currentColor on a transparent background, which means a utility class such as text-purple-700 is enough to recolor it.

Keep the contrast high. A pale symbol on a dark background, or the other way round, is the most common reason a scanner gives up.

import { QRCode } from "flowbite-react";

export function Component() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6">
      <QRCode value="https://flowbite-react.com" size={140} dotColor="#1a56db" backgroundColor="#eff6ff" />
      <QRCode
        value="https://flowbite-react.com"
        size={140}
        dotStyle="rounded"
        cornerColor="#14b8a6"
        cornerDotColor="#f43f5e"
      />
      <QRCode value="https://flowbite-react.com" size={140} className="text-purple-700 dark:text-purple-400" />
    </div>
  );
}

With a logo#

Pass a logo to place an image in the center. size runs from 0 to 1 relative to the largest logo the symbol can safely carry, and the error correction level rises on its own to cover it. Set hideDots to clear the modules behind a logo with transparency, radius to round its corners and margin to keep a gap around it.

import { QRCode } from "flowbite-react";

export function Component() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6">
      <QRCode value="https://flowbite-react.com" size={160} logo={{ src: "/favicon.svg" }} />
      <QRCode
        value="https://flowbite-react.com"
        size={160}
        dotStyle="rounded"
        cornerStyle="extra-rounded"
        logo={{ src: "/favicon.svg", size: 0.6, margin: 1, radius: 1, hideDots: true }}
      />
    </div>
  );
}

Error correction#

A higher error correction level lets a scanner recover a symbol that is partly covered or damaged, at the cost of a denser symbol. Use errorCorrectionLevel with L, M, Q or H, recovering roughly 7%, 15%, 25% and 30% of the data.

Setting this prop also pins the level, so a logo is then scaled down to fit it rather than raising it.

import { QRCode } from "flowbite-react";

export function Component() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6">
      <QRCode value="https://flowbite-react.com" size={130} errorCorrectionLevel="L" />
      <QRCode value="https://flowbite-react.com" size={130} errorCorrectionLevel="M" />
      <QRCode value="https://flowbite-react.com" size={130} errorCorrectionLevel="Q" />
      <QRCode value="https://flowbite-react.com" size={130} errorCorrectionLevel="H" />
    </div>
  );
}

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "root": {
    "base": "text-gray-900 dark:text-white"
  }
}

References#

• Flowbite QR Code