Modern Variant

Dark-Themed Design with Gradient

The Modern variant features a bold, contemporary dark theme with gradient backgrounds, premium styling, and a copy-to-clipboard feature. Perfect for modern portfolios and creative professionals.

Live Preview

Installation

Generate the Modern component:

bash
npx devfund@latest modern

This creates components/devfund/ModernPaymentQR.tsx

Basic Usage

tsx
import ModernPaymentQR from '@/components/devfund/ModernPaymentQR';

export default function SupportPage() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <ModernPaymentQR username="yourname" />
    </div>
  );
}

Props

typescript
interface ModernPaymentQRProps {
  username: string;  // Required: The username to fetch payment data for
}

States

Default State

Shows a bright yellow button:

[💛 Support {DisplayName}]  (yellow)

Loading State

Loading indicator with spinner:

[⏳ Loading...]

Success State

Premium dark modal with:

User name as title
Tagline "Fund me if you like my work"
QR code in white container
UPI ID with copy button
Visual feedback on copy

Copy State

After clicking COPY:

[✓ COPIED]

Text changes back to "COPY" after 2 seconds.

Error State

Error display with red styling:

[⚠️ Error]

Special Features

Copy to Clipboard

The Modern variant includes a built-in copy functionality:

tsx
const handleCopy = async () => {
  try {
    await navigator.clipboard.writeText(userData?.upiId || '');
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  } catch (err) {
    console.error('Failed to copy:', err);
  }
};

Users can click "COPY" below the UPI ID to copy it to their clipboard.

Customization

Change Gradient Colors

Edit the modal gradient:

tsx
// From purple to indigo
className="bg-gradient-to-br from-purple-900/90 to-indigo-900/90"

// Change to different colors
className="bg-gradient-to-br from-blue-900/90 to-cyan-900/90"
className="bg-gradient-to-br from-red-900/90 to-pink-900/90"

Change Button Color

tsx
// From yellow to another color
className="bg-teal-400 hover:bg-teal-500 text-gray-900"

Change Tagline

tsx
// Edit the tagline text
<p className="text-sm text-gray-400">Your custom tagline here</p>

Change Copy Button Text

tsx
// Modify the copy button
{copied ? '✓ DONE' : 'COPY'}

Change Copy Timeout

tsx
// Change from 2 seconds to 5 seconds
setTimeout(() => setCopied(false), 5000);

Advanced Usage

Premium Support Page

tsx
import ModernPaymentQR from '@/components/devfund/ModernPaymentQR';

export default function PremiumSupportPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 to-slate-900">
      <div className="flex flex-col items-center justify-center min-h-screen px-4">
        <div className="max-w-2xl text-center mb-12">
          <h1 className="text-5xl font-bold text-white mb-4">
            Support My Work
          </h1>
          <p className="text-xl text-gray-400 mb-8">
            Your support helps me continue building amazing open-source projects
          </p>
        </div>
        
        <ModernPaymentQR username="yourname" />
        
        <div className="mt-12 grid grid-cols-3 gap-8 text-center">
          <div>
            <div className="text-3xl font-bold text-yellow-400 mb-2">100+</div>
            <div className="text-gray-400">Projects</div>
          </div>
          <div>
            <div className="text-3xl font-bold text-yellow-400 mb-2">50K+</div>
            <div className="text-gray-400">Community</div>
          </div>
          <div>
            <div className="text-3xl font-bold text-yellow-400 mb-2">10+</div>
            <div className="text-gray-400">Years</div>
          </div>
        </div>
      </div>
    </div>
  );
}

With Impact Stats

tsx
export default function CreatorProfile() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 to-black">
      <div className="max-w-4xl mx-auto py-20 px-4">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          <div>
            <h1 className="text-4xl font-bold text-white mb-4">
              Support My Mission
            </h1>
            <p className="text-gray-400 text-lg mb-6">
              I create tools and content to help developers build better software.
            </p>
            <ul className="space-y-3 text-gray-300">
              <li>✓ 50+ open-source projects</li>
              <li>✓ 100K+ downloads monthly</li>
              <li>✓ Active community support</li>
            </ul>
          </div>
          
          <div className="flex justify-center">
            <ModernPaymentQR username="yourname" />
          </div>
        </div>
      </div>
    </div>
  );
}

Multiple Team Members

tsx
export default function TeamPage({ team }: { team: string[] }) {
  return (
    <div className="min-h-screen bg-gray-900 py-20">
      <h1 className="text-4xl font-bold text-white text-center mb-16">
        Support Our Team
      </h1>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto px-4">
        {team.map((member) => (
          <ModernPaymentQR key={member} username={member} />
        ))}
      </div>
    </div>
  );
}

Accessibility

The Modern variant includes:

✅ ARIA labels and descriptions
✅ Keyboard navigation (Tab, Enter, Escape)
✅ Focus management
✅ High contrast dark theme
✅ Screen reader support
✅ Semantic button elements

Performance

🚀 Optimized dark mode rendering
🚀 Efficient clipboard API usage
🚀 Smooth animations at 60fps

Browser Support

✅ Chrome/Edge 63+
✅ Firefox 53+
✅ Safari 13.1+
✅ Mobile browsers

Best Practices

Pair with Dark Backgrounds

The Modern variant works best on dark backgrounds:

tsx
<div className="bg-gray-900 min-h-screen flex items-center justify-center">
  <ModernPaymentQR username="yourname" />
</div>

Use with Gradients

For premium feel, pair with gradients:

tsx
<div className="bg-gradient-to-br from-purple-900 to-indigo-900 min-h-screen flex items-center justify-center">
  <ModernPaymentQR username="yourname" />
</div>

Provide Context

Always provide context around the component:

tsx
<div>
  <h2 className="text-xl font-bold text-white mb-4">Support</h2>
  <p className="text-gray-400 mb-6">Help me continue...</p>
  <ModernPaymentQR username="yourname" />
</div>

Comparison with Other Variants

Aspect	Modern	Card	Glass	Minimal	Modal
Theme	Dark	Light	Light	Light	Light
Style	Bold	Elegant	Trendy	Simple	Standard
Copy Feature	✅	❌	❌	❌	❌
Best For	Modern	Professional	Trendy	Simple	Versatile

Troubleshooting

Gradient not showing

Ensure parent container has proper dimensions and background is visible.

Copy button not working

Check browser support for Clipboard API (all modern browsers).

Text hard to read

The dark theme is intentional. Ensure sufficient contrast by keeping your background dark.