QR Code

Cards 11

About

Here is QR Code component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds QR Code to your project and fits it to your theme.

Code

How QR Code is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { QrCode } from "@ark-ui/react/qr-code";

export default function CustomColors() {
  const colorSchemes = [
    {
      bg: "bg-white dark:bg-blue-900",
      pattern: "fill-blue-600 dark:fill-blue-300",
      label: "Blue",
      border: "border-blue-200 dark:border-blue-700",
    },
    {
      bg: "bg-green-50 dark:bg-green-900",
      pattern: "fill-green-700 dark:fill-green-300",
      label: "Green",
      border: "border-green-200 dark:border-green-700",
    },
    {
      bg: "bg-purple-50 dark:bg-purple-900",
      pattern: "fill-purple-700 dark:fill-purple-300",
      label: "Purple",
      border: "border-purple-200 dark:border-purple-700",
    },
    {
      bg: "bg-gray-900 dark:bg-gray-100",
      pattern: "fill-white dark:fill-gray-900",
      label: "Inverted",
      border: "border-gray-700 dark:border-gray-300",
    },
  ];

  return (
    <div className="grid grid-cols-2 gap-6">
      {colorSchemes.map(({ bg, pattern, label, border }) => (
        <div key={label} className="flex flex-col items-center space-y-3">
          <QrCode.Root value="https://tarkui.com">
            <QrCode.Frame
              className={`w-32 h-32 ${bg} border ${border} rounded-lg p-3`}
            >
              <QrCode.Pattern className={pattern} />
            </QrCode.Frame>
          </QrCode.Root>
          <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
            {label}
          </span>
        </div>
      ))}
    </div>
  );
}