Minimal Variant

Clean and Simple Design

The Minimal variant offers a stripped-down, no-nonsense approach with dark button styling, minimal spacing, and essential elements only. Perfect for minimalist portfolios and clean designs.

Live Preview

Installation

Generate the Minimal component:

bash
npx devfund@latest minimal

This creates components/devfund/MinimalPaymentQR.tsx

Basic Usage

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

export default function SupportPage() {
  return (
    <div className="p-4">
      <MinimalPaymentQR username="yourname" />
    </div>
  );
}

Props

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

States

Default State

Shows a dark button:

[💛 Support {DisplayName}]  (dark button)

Loading State

Compact loading indicator:

[⏳ Loading...]

Success State

Minimal modal showing:

User name as title (smaller font)
"Scan to pay" subtitle
QR code in compact container
UPI ID text
No extra decorations or instructions

Error State

Simple error display:

[⚠️ Error]

When to Use Minimal

Perfect for:

Minimalist personal websites
Tech blogs and portfolios
Distraction-free interfaces
Mobile-first designs
Low-bandwidth scenarios
Accessibility-focused designs

Customization

Change Button Color

tsx
// From dark gray to custom color
className="inline-flex items-center gap-2 bg-indigo-900 hover:bg-indigo-950 text-white font-semibold px-5 py-2 rounded-lg shadow-md transition-all"

Change Button Size

tsx
// Smaller buttons
className="px-4 py-2 text-sm"  // from px-5 py-2

// Larger buttons
className="px-6 py-3 text-base"  // from px-5 py-2

Increase Padding

tsx
// More spacious
className="bg-white rounded-lg shadow-2xl p-8"  // from p-6

Change Modal Width

tsx
// Larger modal
className="max-w-md w-full relative"  // from max-w-sm

// Smaller modal (mobile)
className="max-w-xs w-full relative"  // from max-w-sm

Customize Icon

tsx
// Replace the close button
<button
  onClick={() => setIsOpen(false)}
  className="absolute top-3 right-3 text-gray-400 hover:text-gray-600 transition focus:outline-none"
>
  × {/* or use an icon */}
</button>

Advanced Usage

In a Sidebar

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

export default function Sidebar() {
  return (
    <aside className="w-64 bg-white border-r border-gray-200">
      <nav className="p-4 space-y-4">
        {/* Navigation items */}
      </nav>
      
      <div className="mt-auto p-4 border-t">
        <p className="text-xs text-gray-600 mb-3 font-medium">Like my work?</p>
        <MinimalPaymentQR username="yourname" />
      </div>
    </aside>
  );
}

Inline in Content

tsx
export default function ArticlePage() {
  return (
    <article className="max-w-2xl mx-auto">
      <h1>My Article Title</h1>
      <p>Content here...</p>
      
      {/* Support section */}
      <section className="my-12 p-6 bg-gray-50 rounded-lg border border-gray-200">
        <h3 className="font-semibold mb-4">Enjoy this content?</h3>
        <MinimalPaymentQR username="yourname" />
      </section>
    </article>
  );
}

With Custom Wrapper

tsx
export default function SupportWidget() {
  return (
    <div className="max-w-xs mx-auto">
      <MinimalPaymentQR username="yourname" />
    </div>
  );
}

Accessibility Features

The Minimal variant includes:

✅ Keyboard accessible (Tab, Enter, Escape)
✅ ARIA labels on all interactive elements
✅ Screen reader announcements
✅ Focus indicators
✅ Semantic HTML structure
✅ High contrast text

Performance Benefits

Being minimal provides:

📦 Smaller component size
⚡ Faster rendering
🎯 Better performance on low-end devices
📱 Excellent mobile experience
🔋 Lower battery usage

Code Example - Full Page

tsx
'use client';

import MinimalPaymentQR from '@/components/devfund/MinimalPaymentQR';

export default function MinimalPage() {
  return (
    <div className="min-h-screen bg-white p-4 sm:p-8">
      <div className="max-w-2xl mx-auto">
        <h1 className="text-3xl font-bold mb-4">My Portfolio</h1>
        
        <p className="text-gray-600 mb-8">
          I build open-source tools and libraries. If you find them useful, consider supporting my work.
        </p>
        
        <MinimalPaymentQR username="yourname" />
      </div>
    </div>
  );
}

Browser Support

✅ All modern browsers
✅ IE 11+ (with polyfills)
✅ Mobile browsers

Comparison with Other Variants

Feature	Minimal	Card	Glass	Modern	Modal
Styling	Minimal	Elegant	Modern	Bold	Standard
Complexity	Low	Medium	High	Medium	Medium
Best For	Simple	Professional	Trendy	Bold	Versatile
Load Time	Fastest	Fast	Fast	Fast	Fast

Troubleshooting

Component looks too plain

Try using the Card or Glass variants for more visual interest.

Button text too small

Increase font size:

tsx
className="text-base"  // from default

Modal feels cramped

Increase padding:

tsx
className="p-8"  // from p-6