QR Code

QR code generator component for React and Next.js applications. Built with TypeScript support, Tailwind CSS styling, and shadcn/ui design featuring SVG rendering, custom colors, and server component support.

qrcode

culori

Loading component...

'use client';import { formatHex, oklch } from 'culori';import QR from 'qrcode';import { type HTMLAttributes, useEffect, useState } from 'react';import { cn } from '@/lib/utils';export type QRCodeProps = HTMLAttributes<HTMLDivElement> & {  data: string;  foreground?: string;  background?: string;  robustness?: 'L' | 'M' | 'Q' | 'H';};const oklchRegex = /oklch\(([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)\)/;const getOklch = (color: string, fallback: [number, number, number]) => {  const oklchMatch = color.match(oklchRegex);  if (!oklchMatch) {    return { l: fallback[0], c: fallback[1], h: fallback[2] };  }  return {    l: Number.parseFloat(oklchMatch[1]),    c: Number.parseFloat(oklchMatch[2]),    h: Number.parseFloat(oklchMatch[3]),  };};export const QRCode = ({  data,  foreground,  background,  robustness = 'M',  className,  ...props}: QRCodeProps) => {  const [svg, setSVG] = useState<string | null>(null);  useEffect(() => {    const generateQR = async () => {      try {        const styles = getComputedStyle(document.documentElement);        const foregroundColor =          foreground ?? styles.getPropertyValue('--foreground');        const backgroundColor =          background ?? styles.getPropertyValue('--background');        const foregroundOklch = getOklch(          foregroundColor,          [0.21, 0.006, 285.885]        );        const backgroundOklch = getOklch(backgroundColor, [0.985, 0, 0]);        const newSvg = await QR.toString(data, {          type: 'svg',          color: {            dark: formatHex(oklch({ mode: 'oklch', ...foregroundOklch })),            light: formatHex(oklch({ mode: 'oklch', ...backgroundOklch })),          },          width: 200,          errorCorrectionLevel: robustness,          margin: 0,        });        setSVG(newSvg);      } catch (err) {        console.error(err);      }    };    generateQR();  }, [data, foreground, background, robustness]);  if (!svg) {    return null;  }  return (    <div      className={cn('size-full', '[&_svg]:size-full', className)}      // biome-ignore lint/security/noDangerouslySetInnerHtml: "Required for SVG"      dangerouslySetInnerHTML={{ __html: svg }}      {...props}    />  );};

Installation

npx shadcn@latest add https://www.shadcn.io/registry/qr-code.json

npx shadcn@latest add https://www.shadcn.io/registry/qr-code.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/qr-code.json

bunx shadcn@latest add https://www.shadcn.io/registry/qr-code.json

Features

String-to-QR generation - Convert any text data to QR codes using qrcode library integration
SVG rendering - Crisp scalable graphics at any size using JavaScript vector output
shadcn/ui theming - CSS variable integration with foreground/background colors using Tailwind CSS
Custom colors - Foreground and background color controls using culori library for Next.js projects
Error correction - Configurable robustness levels for better scanning reliability using TypeScript props
Server components - React Server Component support with manual color props for React applications
Open source - Free QR code component with responsive sizing and accessibility features

Examples

Styling

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

Loading component...

'use client';import { formatHex, oklch } from 'culori';import QR from 'qrcode';import { type HTMLAttributes, useEffect, useState } from 'react';import { cn } from '@/lib/utils';export type QRCodeProps = HTMLAttributes<HTMLDivElement> & {  data: string;  foreground?: string;  background?: string;  robustness?: 'L' | 'M' | 'Q' | 'H';};const oklchRegex = /oklch\(([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)\)/;const getOklch = (color: string, fallback: [number, number, number]) => {  const oklchMatch = color.match(oklchRegex);  if (!oklchMatch) {    return { l: fallback[0], c: fallback[1], h: fallback[2] };  }  return {    l: Number.parseFloat(oklchMatch[1]),    c: Number.parseFloat(oklchMatch[2]),    h: Number.parseFloat(oklchMatch[3]),  };};export const QRCode = ({  data,  foreground,  background,  robustness = 'M',  className,  ...props}: QRCodeProps) => {  const [svg, setSVG] = useState<string | null>(null);  useEffect(() => {    const generateQR = async () => {      try {        const styles = getComputedStyle(document.documentElement);        const foregroundColor =          foreground ?? styles.getPropertyValue('--foreground');        const backgroundColor =          background ?? styles.getPropertyValue('--background');        const foregroundOklch = getOklch(          foregroundColor,          [0.21, 0.006, 285.885]        );        const backgroundOklch = getOklch(backgroundColor, [0.985, 0, 0]);        const newSvg = await QR.toString(data, {          type: 'svg',          color: {            dark: formatHex(oklch({ mode: 'oklch', ...foregroundOklch })),            light: formatHex(oklch({ mode: 'oklch', ...backgroundOklch })),          },          width: 200,          errorCorrectionLevel: robustness,          margin: 0,        });        setSVG(newSvg);      } catch (err) {        console.error(err);      }    };    generateQR();  }, [data, foreground, background, robustness]);  if (!svg) {    return null;  }  return (    <div      className={cn('size-full', '[&_svg]:size-full', className)}      // biome-ignore lint/security/noDangerouslySetInnerHtml: "Required for SVG"      dangerouslySetInnerHTML={{ __html: svg }}      {...props}    />  );};

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.

Loading component...

'use client';import { formatHex, oklch } from 'culori';import QR from 'qrcode';import { type HTMLAttributes, useEffect, useState } from 'react';import { cn } from '@/lib/utils';export type QRCodeProps = HTMLAttributes<HTMLDivElement> & {  data: string;  foreground?: string;  background?: string;  robustness?: 'L' | 'M' | 'Q' | 'H';};const oklchRegex = /oklch\(([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)\)/;const getOklch = (color: string, fallback: [number, number, number]) => {  const oklchMatch = color.match(oklchRegex);  if (!oklchMatch) {    return { l: fallback[0], c: fallback[1], h: fallback[2] };  }  return {    l: Number.parseFloat(oklchMatch[1]),    c: Number.parseFloat(oklchMatch[2]),    h: Number.parseFloat(oklchMatch[3]),  };};export const QRCode = ({  data,  foreground,  background,  robustness = 'M',  className,  ...props}: QRCodeProps) => {  const [svg, setSVG] = useState<string | null>(null);  useEffect(() => {    const generateQR = async () => {      try {        const styles = getComputedStyle(document.documentElement);        const foregroundColor =          foreground ?? styles.getPropertyValue('--foreground');        const backgroundColor =          background ?? styles.getPropertyValue('--background');        const foregroundOklch = getOklch(          foregroundColor,          [0.21, 0.006, 285.885]        );        const backgroundOklch = getOklch(backgroundColor, [0.985, 0, 0]);        const newSvg = await QR.toString(data, {          type: 'svg',          color: {            dark: formatHex(oklch({ mode: 'oklch', ...foregroundOklch })),            light: formatHex(oklch({ mode: 'oklch', ...backgroundOklch })),          },          width: 200,          errorCorrectionLevel: robustness,          margin: 0,        });        setSVG(newSvg);      } catch (err) {        console.error(err);      }    };    generateQR();  }, [data, foreground, background, robustness]);  if (!svg) {    return null;  }  return (    <div      className={cn('size-full', '[&_svg]:size-full', className)}      // biome-ignore lint/security/noDangerouslySetInnerHtml: "Required for SVG"      dangerouslySetInnerHTML={{ __html: svg }}      {...props}    />  );};

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.

Loading component...

Use Cases

Contact sharing - vCard and contact information distribution
URL sharing - Website links and deep linking for mobile apps
Authentication - Two-factor auth and secure login processes
Payment systems - Cryptocurrency addresses and payment links

Implementation

Built with qrcode library for generation. Uses culori for color processing. SVG output for scalability. Supports both client and server components with theme integration.

Reactqr-code

Reactqr-code

Reactqr-code

Reactqr-code/server

On this page