Copy Code

Previous: Lightbox

Next: Advertisement

Close Terminal

Light Mode

qr-code-demo.tsx

qr-code.tsx

prompt.md

Collapse

Reset

Copy Code

Download

Run

"use client";

import { useState } from "react";

import { QRCodeDisplay } from "./qr-code";

import { ChevronDown } from "lucide-react";

import { motion, AnimatePresence } from "framer-motion";

// SVG Logos for Cryptocurrencies

const BitcoinIcon = () => (

</svg>

);

const EthereumIcon = () => (

</svg>

);

const SolanaIcon = () => (

</svg>

);

const TetherIcon = () => (

</svg>

);

const CRYPTO_OPTIONS = [

{

id: "bitcoin",

label: "Bitcoin (BTC)",

value: "bitcoin:1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa",

glowColor: "rgba(247, 147, 26, 0.4)", // orange

icon: <BitcoinIcon />

{

id: "ethereum",

label: "Ethereum (ETH)",

value: "ethereum:0xde0b295669a9fd93d5f28d9ec85e40f4cb697bae",

glowColor: "rgba(98, 126, 234, 0.4)", // blue

icon: <EthereumIcon />

{

id: "solana",

label: "Solana (SOL)",

value: "solana:HN7cABqLq46Es1jh92dQQisAq662SmxELLLsHHe4YWrH",

glowColor: "rgba(153, 69, 255, 0.4)", // purple

icon: <SolanaIcon />

{

id: "tether",

label: "Tether (USDT)",

value: "ethereum:0xdac17f958d2ee523a2206206994597c13d831ec7",

glowColor: "rgba(38, 161, 123, 0.4)", // green

icon: <TetherIcon />

];

export function QRCodeDemo() {

const [selectedId, setSelectedId] = useState(CRYPTO_OPTIONS[0].id);

const selectedOption = CRYPTO_OPTIONS.find(opt => opt.id === selectedId) || CRYPTO_OPTIONS[0];

return (

{/* Animated Glowing Background with soft natural falloff */}

<motion.div

key={selectedOption.id}

initial={{ opacity: 0, scale: 0.8 }}

animate={{ opacity: 0.7, scale: 1 }}

exit={{ opacity: 0, scale: 1.15 }}

transition={{ duration: 0.8, ease: "easeInOut" }}

className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[420px] h-[420px] rounded-full blur-[100px] pointer-events-none"

style={{

background: "radial-gradient(circle closest-side, " + selectedOption.glowColor + " 0%, rgba(0,0,0,0) 80%)",

}}

</AnimatePresence>

{/* Dropdown */}

<select

value={selectedId}

onChange={(e) => setSelectedId(e.target.value)}

className="bg-white/80 dark:bg-black/80 backdrop-blur-md border border-black/10 dark:border-white/10 rounded-full px-6 py-2.5 text-sm font-medium outline-none appearance-none pr-12 cursor-pointer hover:bg-white dark:hover:bg-zinc-900 transition-colors shadow-sm"

{CRYPTO_OPTIONS.map((opt) => (

<option key={opt.id} value={opt.id}>{opt.label}</option>

100

))}

101

</select>

102

103

</div>

104

105

{/* QR Code */}

106

107

<QRCodeDisplay

108

value={selectedOption.value}

109

size={240}

110

logo={selectedOption.icon}

111

logoSize={48}

112

113

</div>

114

115

</div>

116

);

117

}

118

QR Code

A scannable code in dots that ripples each time what it encodes changes.

Installation

npx @orite/sunflower add qr-code

Component API

valuestring

=Required

The string to encode

sizenumber

=200

Width and height in pixels

logoReactNode

=None

Component to render in center

colorsarray

=Blue to cyan

Background glow colors

labelstring

=The value

Accessible label

classNamestring

=Optional

Optional CSS classes

PropTypeDefaultDescription

valuestringRequiredThe string to encode

sizenumber200Width and height in pixels

logoReactNodeNoneComponent to render in center

colorsarrayBlue to cyanBackground glow colors

labelstringThe valueAccessible label

classNamestringOptionalOptional CSS classes

Composition

Built on Motion with staggered spring delays.
Accepts native div props.
Carries data-slot attributes to style against.
Custom central clear-zone logic for logos.