Usage

Generate Component

bashCopy
npx devfund@latest <variant>

Variants: card | glass | minimal | modern | modal

Creates: components/devfund/{ComponentName}.tsx

Import & Use

tsxCopy
import CardPaymentQR from '@/components/devfund/CardPaymentQR';

export default function App() {
  return <CardPaymentQR username="johndoe" />;
}

Props

Component States

Loading → Shows spinner while fetching data

Success → Displays QR code and payment options

Error → Shows friendly error message if user not found

Example Uses

In a Blog Post

tsxCopy
export default function BlogPost() {
  return (
    <>
      <article>...</article>
      <section className="mt-12 pt-8 border-t">
        <h3>Support My Work</h3>
        <CardPaymentQR username="yourname" />
      </section>
    </>
  );
}

In a Profile Page

tsxCopy
export default function Profile({ username }: { username: string }) {
  return (
    <div>
      <h1>{username}'s Profile</h1>
      <GlassPaymentQR username={username} />
    </div>
  );
}

Multiple Variants

tsxCopy
export default function ShowcaseAllVariants() {
  const username = "yourname";
  return (
    <div className="grid md:grid-cols-5 gap-4">
      <CardPaymentQR username={username} />
      <GlassPaymentQR username={username} />
      <MinimalPaymentQR username={username} />
      <ModernPaymentQR username={username} />
      <ModalPaymentQR username={username} />
    </div>
  );
}

TypeScript

Full type support:

tsxCopy
import CardPaymentQR from '@/components/devfund/CardPaymentQR';

interface Props {
  username: string;
}

export default function Payment({ username }: Props) {
  return <CardPaymentQR username={username} />;
}

Features

✅ Automatic data fetching
✅ Error handling
✅ Loading states
✅ Timeout protection
✅ ARIA labels
✅ Mobile responsive

Explore Variants →