QR Code

Component

About

Generates a scannable QR code as a crisp SVG for any text or URL, with adjustable error-correction level, quiet-zone border and optional brand-colored corner squares. Ported to React from the Starbase web component library by zweiundeins (MIT).

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 * as React from "react";
import QrCode from "@/components/ui/qr-code";

export default function QrCodeLiveDemo() {
  const [value, setValue] = React.useState("https://starbase.example");

  return (
    <div style={{ display: "grid", gap: 16, justifyItems: "start" }}>
      <div style={{ display: "grid", gap: 4 }}>
        <label htmlFor="qr-value" style={{ fontSize: 12 }}>
          Text or URL
        </label>
        <input
          id="qr-value"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          style={{
            width: "20rem",
            padding: "0.5rem",
            border: "1px solid #d4d4d8",
            borderRadius: 6,
          }}
        />
      </div>
      <QrCode accent value={value} />
    </div>
  );
}